将单选按钮对齐在页面的左侧。

huangapple
go评论186阅读模式
英文:

Align radio buttons on left side of the page

问题

I am working on a personal project and I don't know how to align these radio buttons with the above text of each other.

My current situation is this...
将单选按钮对齐在页面的左侧。

I would like to achieve this other...
将单选按钮对齐在页面的左侧。

This is my 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>

And this is 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;
}

Potentially, all buttons should be aligned with the first character of the longest question.

英文:

I am working on a personal project and I don't know how to align these radio buttons with the above text of eachother.

My current situation is this...
将单选按钮对齐在页面的左侧。

I would like to achieve this other...
将单选按钮对齐在页面的左侧。

This is my HTML:

&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;

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

And this is 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=&quot;radio&quot;] {
    margin-right: 5px;
    align-items: flex-start;
}

form button[type=&quot;submit&quot;] {
    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: &#39;Open Sans&#39;, &quot;Segoe UI&quot;, Frutiger, &quot;Frutiger Linotype&quot;, &quot;Dejavu Sans&quot;, &quot;Helvetica Neue&quot;, 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;
}

Potentially, all buttons should be aligned with the first character of the longest question.

答案1

得分: 1

你需要将 text-align: center; 更改为 text-align: left;，这导致了单选按钮居中，但如果你将其更改为 text-align: left;，它们就会向左移动。

更新后的代码如下：

    .site-title {
        text-align: left;
    }

    body {
        text-align: left;
    }

    form {
        text-align: left;
    }

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

    footer {
        text-align: center;
    }

    .card-title {
        text-align: left;
    }
英文:

You need to change the text-align: center; to text-align: left; this was causing the radio buttons to be centered, but if you change it to text-align: left; they will go left.

The updated code is

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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=&quot;radio&quot;] {
        margin-right: 5px;
        align-items: flex-start;
    }

    form button[type=&quot;submit&quot;] {
        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: &#39;Open Sans&#39;, &quot;Segoe UI&quot;, Frutiger, &quot;Frutiger Linotype&quot;, &quot;Dejavu Sans&quot;, &quot;Helvetica Neue&quot;, 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;
    }

<!-- language: lang-html -->

&lt;!doctype html&gt;
    &lt;html lang=&quot;en&quot;&gt;

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

<!-- end snippet -->

答案2

得分: 0

如果我理解正确，您希望您的调查问卷位于左侧，但您设置了 text-align: center; 来使包括这些调查问卷的 ol 标签居中对齐。

因此，您希望将其移到左侧，您需要在您的 div 中声明 text-align: left;。

    <form action='/risultati' method='POST'>
      <ol style="text-align: left; 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>
英文:

If my understanding is correct you want your questionnaire to be on left, but you set text-align: center; of your ol tag that includes these questionnaire so that all it's aligned center.

Therefore, you want to make it to the left side, you need to declare text-align: left; in your div.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

.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=&quot;radio&quot;] {
    margin-right: 5px;
    align-items: flex-start;
}

form button[type=&quot;submit&quot;] {
    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: &#39;Open Sans&#39;, &quot;Segoe UI&quot;, Frutiger, &quot;Frutiger Linotype&quot;, &quot;Dejavu Sans&quot;, &quot;Helvetica Neue&quot;, 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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月1日 05:31:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/76377430.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定