欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

在頁(yè)面左側(cè)對(duì)齊單選按鈕

CSS

我正在做一個(gè)個(gè)人項(xiàng)目，我不知道如何將這些單選按鈕與上面的文本對(duì)齊。

我目前的情況是這樣的...example

我想實(shí)現(xiàn)另一個(gè)目標(biāo)...would_like_2

這是我的HTML:

<!doctype html>
<html lang="en">

<head>
    <title>Simulatore Quiz AREU</title>
</head>
<form action='/risultati' method='POST'>
    <ol style="text-align: center; list-style-position: inside">
        {% for i in q %}<br/>
            <div>
                <li>{{ i }}</li>
                    {% for j in o[i] %}
                        <div>
                            <label>
                                <input type='radio' value='{{ j }}' name='{{ i }}' required/>
                            </label>{{ j }}<br/>
                        </div>
                    {%- endfor %}
                </div>
            {%- endfor %}
        </ol>
        <button type="submit" name="submit_button"> Finisci Test</button>
    </form>
</html>

這是CSS:

/* https://www.bootdey.com/snippets/view/microsoft-metro-tiles-bootstrap#html */

.site-title {
    margin-top: 2rem;
    margin-bottom: 3.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: black;
    text-align: center;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: center;
}

form {
    margin: 10px;
    width: 1200px;
    text-overflow: ellipsis;
    display: contents;
}

input[type="radio"] {
    margin-right: 5px;
    align-items: flex-start;
}

form button[type="submit"] {
    margin-top: 30px;
    position: relative;
    overflow: hidden;
    background-color: #d00000;
    color: white;
    border: 0;
    padding: 1.5em 0.7em;
}

footer {
    margin-top: auto;
    text-align: center;
}


p, span, a, ul, li, button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

strong {
    font-weight: 600;
}

h1, h2, h3, h4, h5 {
    font-family: 'Open Sans', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serify, serif;
    line-height: 1.5em;
    font-weight: 300;
}

.card-tile {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    background: #fff;
    padding: 20px;
    margin-bottom: 30px;
}

.card-title {
    margin-top: 0;
    text-align: center;
}

.purple, .blue, .red, .orange, .green {
    color: #fff;
}

.red {
    background: #d00000;
}

可能的情況是，所有按鈕都應(yīng)該與最長(zhǎng)問(wèn)題的第一個(gè)字符對(duì)齊。

您需要更改文本對(duì)齊:居中；文本對(duì)齊:左對(duì)齊；這導(dǎo)致單選按鈕居中，但是如果您將其更改為text-align:left；他們將向左走。

更新后的代碼是

.site-title {
        margin-top: 2rem;
        margin-bottom: 3.5rem;
        font-weight: 500;
        line-height: 1.2;
        color: black;
        text-align: left;
    }

    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    form {
        margin: 10px;
        width: 1200px;
        text-overflow: ellipsis;
        display: contents;
    }

    input[type="radio"] {
        margin-right: 5px;
        align-items: flex-start;
    }

    form button[type="submit"] {
        margin-top: 30px;
        position: relative;
        overflow: hidden;
        background-color: #d00000;
        color: white;
        border: 0;
        padding: 1.5em 0.7em;
    }

    footer {
        margin-top: auto;
        text-align: center;
    }


    p, span, a, ul, li, button {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    strong {
        font-weight: 600;
    }

    h1, h2, h3, h4, h5 {
        font-family: 'Open Sans', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serify, serif;
        line-height: 1.5em;
        font-weight: 300;
    }

    .card-tile {
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        background: #fff;
        padding: 20px;
        margin-bottom: 30px;
    }

    .card-title {
        margin-top: 0;
        text-align: left;
    }

    .purple, .blue, .red, .orange, .green {
        color: #fff;
    }

    .red {
        background: #d00000;
    }

<!doctype html>
    <html lang="en">

    <head>
        <title>Simulatore Quiz AREU</title>
    </head>
    <form action='/risultati' method='POST'>
        <ol style="text-align: center; list-style-position: inside; padding-left: 200px;">
            <div style="text-align: left;">{% for i in q %}<div>
                <div style="text-align: left;">
                    <li>{{ i }}</li>
                        {% for j in o[i] %}
                            <div>
                                <label>
                                    <input type='radio' value='{{ j }}' name='{{ i }}' required/>
                                </label>{{ j }}<br/>
                            </div>
                        {%- endfor %}
                    </div>
                {%- endfor %}
            </ol>
            <button type="submit" name="submit_button"> Finisci Test</button>
        </form>
    </html>

如果我的理解正確的話，你希望你的問(wèn)卷在左邊，但是你設(shè)置了文本對(duì)齊:居中；你的ol標(biāo)簽，包括這些調(diào)查問(wèn)卷，以便所有它對(duì)齊中心。

因此，您想讓它位于左側(cè)，您需要聲明text-align:left；在你的部門(mén)。

.site-title {
    margin-top: 2rem;
    margin-bottom: 3.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: black;
    text-align: center;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: center;
}

form {
    margin: 10px;
    width: 1200px;
    text-overflow: ellipsis;
    display: contents;
}

input[type="radio"] {
    margin-right: 5px;
    align-items: flex-start;
}

form button[type="submit"] {
    margin-top: 30px;
    position: relative;
    overflow: hidden;
    background-color: #d00000;
    color: white;
    border: 0;
    padding: 1.5em 0.7em;
}

footer {
    margin-top: auto;
    text-align: center;
}


p, span, a, ul, li, button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

strong {
    font-weight: 600;
}

h1, h2, h3, h4, h5 {
    font-family: 'Open Sans', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serify, serif;
    line-height: 1.5em;
    font-weight: 300;
}

.card-tile {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    background: #fff;
    padding: 20px;
    margin-bottom: 30px;
}

.card-title {
    margin-top: 0;
    text-align: center;
}

.purple, .blue, .red, .orange, .green {
    color: #fff;
}

.red {
    background: #d00000;
}

<form action='/risultati' method='POST'>
  <ol style="text-align: center; list-style-position: inside;margin-left: 0;padding-left: 0;">
      {% for i in q %}<br/>
        <div style="text-align: left;">
          <li>{{ i }}</li>
              {% for j in o[i] %}
                  <div>
                      <label>
                          <input type='radio' value='{{ j }}' name='{{ i }}' required/>
                      </label>{{ j }}<br/>
                  </div>
              {%- endfor %}
          </div>
      {%- endfor %}
  </ol>
  <button type="submit" name="submit_button"> Finisci Test</button>
</form>