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

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

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:

  1. <!doctype html>
  2. <html lang="en">
  4. <head>
  5.     <title>Simulatore Quiz AREU</title>
  6. </head>
  7. <form action='/risultati' method='POST'>
  8.     <ol style="text-align: center; list-style-position: inside">
  9.         {% for i in q %}<br/>
  10.             <div>
  11.                 <li>{{ i }}</li>
  12.                     {% for j in o[i] %}
  13.                         <div>
  14.                             <label>
  15.                                 <input type='radio' value='{{ j }}' name='{{ i }}' required/>
  16.                             </label>{{ j }}<br/>
  17.                         </div>
  18.                     {%- endfor %}
  19.                 </div>
  20.             {%- endfor %}
  21.         </ol>
  22.         <button type="submit" name="submit_button"> Finisci Test</button>
  23.     </form>
  24. </html>

And this is CSS:

  1. /* https://www.bootdey.com/snippets/view/microsoft-metro-tiles-bootstrap#html */
  3. .site-title {
  4.     margin-top: 2rem;
  5.     margin-bottom: 3.5rem;
  6.     font-weight: 500;
  7.     line-height: 1.2;
  8.     color: black;
  9.     text-align: center;
  10. }
  12. body {
  13.     min-height: 100vh;
  14.     display: flex;
  15.     flex-direction: column;
  16.     text-align: center;
  17. }
  19. form {
  20.     margin: 10px;
  21.     width: 1200px;
  22.     text-overflow: ellipsis;
  23.     display: contents;
  24. }
  26. input[type="radio"] {
  27.     margin-right: 5px;
  28.     align-items: flex-start;
  29. }
  31. form button[type="submit"] {
  32.     margin-top: 30px;
  33.     position: relative;
  34.     overflow: hidden;
  35.     background-color: #d00000;
  36.     color: white;
  37.     border: 0;
  38.     padding: 1.5em 0.7em;
  39. }
  41. footer {
  42.     margin-top: auto;
  43.     text-align: center;
  44. }
  46. p, span, a, ul, li, button {
  47.     font-family: inherit;
  48.     font-size: inherit;
  49.     font-weight: inherit;
  50.     line-height: inherit;
  51. }
  53. strong {
  54.     font-weight: 600;
  55. }
  57. h1, h2, h3, h4, h5 {
  58.     font-family: 'Open Sans', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serify, serif;
  59.     line-height: 1.5em;
  60.     font-weight: 300;
  61. }
  63. .card-tile {
  64.     width: 100%;
  65.     display: inline-block;
  66.     box-sizing: border-box;
  67.     background: #fff;
  68.     padding: 20px;
  69.     margin-bottom: 30px;
  70. }
  72. .card-title {
  73.     margin-top: 0;
  74.     text-align: center;
  75. }
  77. .purple, .blue, .red, .orange, .green {
  78.     color: #fff;
  79. }
  81. .red {
  82.     background: #d00000;
  83. }

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:

  1. &lt;!doctype html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;Simulatore Quiz AREU&lt;/title&gt;
  5. &lt;/head&gt;
  6. &lt;form action=&#39;/risultati&#39; method=&#39;POST&#39;&gt;
  7. &lt;ol style=&quot;text-align: center; list-style-position: inside&quot;&gt;
  8. {% for i in q %}&lt;br/&gt;
  9. &lt;div&gt;
  10. &lt;li&gt;{{ i }}&lt;/li&gt;
  11. {% for j in o[i] %}
  12. &lt;div&gt;
  13. &lt;label&gt;
  14. &lt;input type=&#39;radio&#39; value=&#39;{{ j }}&#39; name=&#39;{{ i }}&#39; required/&gt;
  15. &lt;/label&gt;{{ j }}&lt;br/&gt;
  16. &lt;/div&gt;
  17. {%- endfor %}
  18. &lt;/div&gt;
  19. {%- endfor %}
  20. &lt;/ol&gt;
  21. &lt;button type=&quot;submit&quot; name=&quot;submit_button&quot;&gt; Finisci Test&lt;/button&gt;
  22. &lt;/form&gt;
  23. &lt;/html&gt;

And this is CSS:

  1. /* https://www.bootdey.com/snippets/view/microsoft-metro-tiles-bootstrap#html */
  2. .site-title {
  3. margin-top: 2rem;
  4. margin-bottom: 3.5rem;
  5. font-weight: 500;
  6. line-height: 1.2;
  7. color: black;
  8. text-align: center;
  9. }
  10. body {
  11. min-height: 100vh;
  12. display: flex;
  13. flex-direction: column;
  14. text-align: center;
  15. }
  16. form {
  17. margin: 10px;
  18. width: 1200px;
  19. text-overflow: ellipsis;
  20. display: contents;
  21. }
  22. input[type=&quot;radio&quot;] {
  23. margin-right: 5px;
  24. align-items: flex-start;
  25. }
  26. form button[type=&quot;submit&quot;] {
  27. margin-top: 30px;
  28. position: relative;
  29. overflow: hidden;
  30. background-color: #d00000;
  31. color: white;
  32. border: 0;
  33. padding: 1.5em 0.7em;
  34. }
  35. footer {
  36. margin-top: auto;
  37. text-align: center;
  38. }
  39. p, span, a, ul, li, button {
  40. font-family: inherit;
  41. font-size: inherit;
  42. font-weight: inherit;
  43. line-height: inherit;
  44. }
  45. strong {
  46. font-weight: 600;
  47. }
  48. h1, h2, h3, h4, h5 {
  49. 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;
  50. line-height: 1.5em;
  51. font-weight: 300;
  52. }
  53. .card-tile {
  54. width: 100%;
  55. display: inline-block;
  56. box-sizing: border-box;
  57. background: #fff;
  58. padding: 20px;
  59. margin-bottom: 30px;
  60. }
  61. .card-title {
  62. margin-top: 0;
  63. text-align: center;
  64. }
  65. .purple, .blue, .red, .orange, .green {
  66. color: #fff;
  67. }
  68. .red {
  69. background: #d00000;
  70. }

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;，它们就会向左移动。

更新后的代码如下：

  1.     .site-title {
  2.         text-align: left;
  3.     }
  5.     body {
  6.         text-align: left;
  7.     }
  9.     form {
  10.         text-align: left;
  11.     }
  13.     input[type="radio"] {
  14.         align-items: flex-start;
  15.     }
  17.     footer {
  18.         text-align: center;
  19.     }
  21.     .card-title {
  22.         text-align: left;
  23.     }
英文:

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

  1. .site-title {
  2. margin-top: 2rem;
  3. margin-bottom: 3.5rem;
  4. font-weight: 500;
  5. line-height: 1.2;
  6. color: black;
  7. text-align: left;
  8. }
  9. body {
  10. min-height: 100vh;
  11. display: flex;
  12. flex-direction: column;
  13. text-align: left;
  14. }
  15. form {
  16. margin: 10px;
  17. width: 1200px;
  18. text-overflow: ellipsis;
  19. display: contents;
  20. }
  21. input[type=&quot;radio&quot;] {
  22. margin-right: 5px;
  23. align-items: flex-start;
  24. }
  25. form button[type=&quot;submit&quot;] {
  26. margin-top: 30px;
  27. position: relative;
  28. overflow: hidden;
  29. background-color: #d00000;
  30. color: white;
  31. border: 0;
  32. padding: 1.5em 0.7em;
  33. }
  34. footer {
  35. margin-top: auto;
  36. text-align: center;
  37. }
  38. p, span, a, ul, li, button {
  39. font-family: inherit;
  40. font-size: inherit;
  41. font-weight: inherit;
  42. line-height: inherit;
  43. }
  44. strong {
  45. font-weight: 600;
  46. }
  47. h1, h2, h3, h4, h5 {
  48. 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;
  49. line-height: 1.5em;
  50. font-weight: 300;
  51. }
  52. .card-tile {
  53. width: 100%;
  54. display: inline-block;
  55. box-sizing: border-box;
  56. background: #fff;
  57. padding: 20px;
  58. margin-bottom: 30px;
  59. }
  60. .card-title {
  61. margin-top: 0;
  62. text-align: left;
  63. }
  64. .purple, .blue, .red, .orange, .green {
  65. color: #fff;
  66. }
  67. .red {
  68. background: #d00000;
  69. }

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

  1. &lt;!doctype html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;Simulatore Quiz AREU&lt;/title&gt;
  5. &lt;/head&gt;
  6. &lt;form action=&#39;/risultati&#39; method=&#39;POST&#39;&gt;
  7. &lt;ol style=&quot;text-align: center; list-style-position: inside; padding-left: 200px;&quot;&gt;
  8. &lt;div style=&quot;text-align: left;&quot;&gt;{% for i in q %}&lt;div&gt;
  9. &lt;div style=&quot;text-align: left;&quot;&gt;
  10. &lt;li&gt;{{ i }}&lt;/li&gt;
  11. {% for j in o[i] %}
  12. &lt;div&gt;
  13. &lt;label&gt;
  14. &lt;input type=&#39;radio&#39; value=&#39;{{ j }}&#39; name=&#39;{{ i }}&#39; required/&gt;
  15. &lt;/label&gt;{{ j }}&lt;br/&gt;
  16. &lt;/div&gt;
  17. {%- endfor %}
  18. &lt;/div&gt;
  19. {%- endfor %}
  20. &lt;/ol&gt;
  21. &lt;button type=&quot;submit&quot; name=&quot;submit_button&quot;&gt; Finisci Test&lt;/button&gt;
  22. &lt;/form&gt;
  23. &lt;/html&gt;

<!-- end snippet -->

答案2

得分: 0

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

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

  1.     <form action='/risultati' method='POST'>
  2.       <ol style="text-align: left; list-style-position: inside;margin-left: 0;padding-left: 0;">
  3.           {% for i in q %}<br/>
  4.             <div style="text-align: left;">
  5.               <li>{{ i }}</li>
  6.                   {% for j in o[i] %}
  7.                       <div>
  8.                           <label>
  9.                               <input type='radio' value='{{ j }}' name='{{ i }}' required/>
  10.                           </label>{{ j }}<br/>
  11.                       </div>
  12.                   {%- endfor %}
  13.               </div>
  14.           {%- endfor %}
  15.       </ol>
  16.       <button type="submit" name="submit_button"> Finisci Test</button>
  17.     </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 -->

  1. .site-title {
  2. margin-top: 2rem;
  3. margin-bottom: 3.5rem;
  4. font-weight: 500;
  5. line-height: 1.2;
  6. color: black;
  7. text-align: center;
  8. }
  9. body {
  10. min-height: 100vh;
  11. display: flex;
  12. flex-direction: column;
  13. text-align: center;
  14. }
  15. form {
  16. margin: 10px;
  17. width: 1200px;
  18. text-overflow: ellipsis;
  19. display: contents;
  20. }
  21. input[type=&quot;radio&quot;] {
  22. margin-right: 5px;
  23. align-items: flex-start;
  24. }
  25. form button[type=&quot;submit&quot;] {
  26. margin-top: 30px;
  27. position: relative;
  28. overflow: hidden;
  29. background-color: #d00000;
  30. color: white;
  31. border: 0;
  32. padding: 1.5em 0.7em;
  33. }
  34. footer {
  35. margin-top: auto;
  36. text-align: center;
  37. }
  38. p, span, a, ul, li, button {
  39. font-family: inherit;
  40. font-size: inherit;
  41. font-weight: inherit;
  42. line-height: inherit;
  43. }
  44. strong {
  45. font-weight: 600;
  46. }
  47. h1, h2, h3, h4, h5 {
  48. 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;
  49. line-height: 1.5em;
  50. font-weight: 300;
  51. }
  52. .card-tile {
  53. width: 100%;
  54. display: inline-block;
  55. box-sizing: border-box;
  56. background: #fff;
  57. padding: 20px;
  58. margin-bottom: 30px;
  59. }
  60. .card-title {
  61. margin-top: 0;
  62. text-align: center;
  63. }
  64. .purple, .blue, .red, .orange, .green {
  65. color: #fff;
  66. }
  67. .red {
  68. background: #d00000;
  69. }

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

  1. &lt;form action=&#39;/risultati&#39; method=&#39;POST&#39;&gt;
  2. &lt;ol style=&quot;text-align: center; list-style-position: inside;margin-left: 0;padding-left: 0;&quot;&gt;
  3. {% for i in q %}&lt;br/&gt;
  4. &lt;div style=&quot;text-align: left;&quot;&gt;
  5. &lt;li&gt;{{ i }}&lt;/li&gt;
  6. {% for j in o[i] %}
  7. &lt;div&gt;
  8. &lt;label&gt;
  9. &lt;input type=&#39;radio&#39; value=&#39;{{ j }}&#39; name=&#39;{{ i }}&#39; required/&gt;
  10. &lt;/label&gt;{{ j }}&lt;br/&gt;
  11. &lt;/div&gt;
  12. {%- endfor %}
  13. &lt;/div&gt;
  14. {%- endfor %}
  15. &lt;/ol&gt;
  16. &lt;button type=&quot;submit&quot; name=&quot;submit_button&quot;&gt; Finisci Test&lt;/button&gt;
  17. &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:

确定