如何从左到右显示文本

Question

我必须显示如下问题：

但我无法对齐答案标签，因为它们的大小不一样，这就是我得到的：

那么如何使文本从左到右书写，如第一个截图所示？

Answer 1

尝试将波纹管CSS添加到标签标签

 label{
    display:inline-block; 
    width:120px;
    text-align:right;
 }

或使用border =＆＃34; 0＆＃34;属性和对齐=＆＃34;对＆＃34;为第一列

Answer 2

我建议您使用表格（默认情况下列是自动调整大小），以便轻松创建此布局：

＆＃13;

＆＃13;

table {
  display: inline-block;
  background: #eee;
  border-collapse: collapse;
}

table tr td:first-of-type {
  text-align: right;
}

table td {
  position: relative;
  padding: 8px 12px;
  vertical-align: middle;
  /* Borders added only to see the cells */
  border: 0 solid #ccc;
  border-width: 2px 1px;
}

＆＃13;

<table>
  <tr>
    <td>Fonds structuré :</td>
    <td>
      <label><input type="radio" name="fond" /><span>Oui</span></label>
    </td>
    <td>
      <label><input type="radio" name="fond" />Non</label>
    </td>
  </tr>
  <tr>
    <td>Obligation :</td>
    <td>
      <input type="radio" name="oblig" />
      <label>Oui</label>
    </td>
    <td>
      <input type="radio" name="oblig" />
      <label>Non</label>
    </td>
  </tr>
  <tr>
    <td>Assurance-vie ou action :</td>
    <td>
      <input type="radio" name="assu" />
      <label>Oui</label>
    </td>
    <td>
      <input type="radio" name="assu" />
      <label>Non</label>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。

Answer 3

.main {
  width: 100%;
  display: inline-block;
  padding: 10px;
}

.content{
padding: 20px;
}

.text_col {
  width: 50%;
  float: left;
  padding: 0px 10px;
  box-sizing: border-box;
}

.input_col {
  width: 20%;
  float: left;
  padding: 0px 10px;
  box-sizing: border-box;
}

.text_col p {
  text-align: right;
  margin: 0px;
}

<div class="main">
  <div class="content">
  <div class="text_col">
    <p>
      Next of Kin:
    </p>
  </div>
  <div class="input_col">
    <input type="radio" id="radio1" />
    <label for="s1">Yes</label>
  </div>
  <div class="input_col">
    <input type="radio" id="radio2" />
    <label for="s2">No</label>
  </div>
  </div>
  
  <div class="content">
  <div class="text_col">
    <p>
      Gender:
    </p>
  </div>
  <div class="input_col">
    <input type="radio" id="radio1" />
    <label for="s1">Yes</label>
  </div>
  <div class="input_col">
    <input type="radio" id="radio2" />
    <label for="s2">No</label>
  </div>
  </div>
  
  <div class="content">
  <div class="text_col">
    <p>
      Relationship with Next of Kin:
    </p>
  </div>
  <div class="input_col">
    <input type="radio" id="radio1" />
    <label for="s1">Yes</label>
  </div>
  <div class="input_col">
    <input type="radio" id="radio2" />
    <label for="s2">No</label>
  </div>
  </div>
</div>