2023年6月1日 05:31:27go评论71阅读模式

英文:

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

.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;
}

&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;

答案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.

.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;
}

&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;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

答案2

I have a problem with CSS GRID on FORMs which have FIELDSETs in them – GRID ends up on both parent and child and then breaks

我的按钮在我点击它时会移动。如何修复这个问题？

为什么它的旋转是椭圆形状

使用CSS如何正确将容器置于页面底部居中。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论