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

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

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
匿名

发表评论

匿名网友

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

确定