Question

下面的示例显示了将标签右对齐到输入的最小工作示例。有没有办法让输入采取100％宽度？另一个预期的用例是用textarea或任何其他具有可变高度的div替换输入。

<!DOCTYPE html5>
<html>
    <head>
        <style>
div.a {
    flex:1 1;
}

div.b {
    flex:1 1;
}

div.form {
    /*display: table;*/
    width: 100%;
}

div.form div {
    display: table-row;
    width: 100%;
}

div.form div label {
    display: table-cell;
    text-align: right;
    padding-right: 5px; 
}

div.form div input {
    width: 100%;
}

        </style>
    </head>
    <body>
        <div style="display:flex">
            <div class="a">
                <div class="form">
                    <div>
                        <label>a</label>
                        <input/>
                    </div>

                    <div>
                        <label>askldak  asd ls</label>
                        <input/>
                    </div>
                    <div>
                        <label>askldakasda   asdls</label>
                        <input/>
                    </div>
                </div>
            </div>
            <div class="b">b</div>
        </div>
    </body>
</html>

编辑1

Example from the second post

我已尝试过该示例，但标签未按预期对齐。

Answer 1

您可以使用flexbox

实现这一目标

＆＃13;

.form div {
  display: flex
}
.form div input {
  flex: 1
}

＆＃13;

<div>
  <div class="a">
    <div class="form">
      <div>
        <label>a</label>
        <input/>
      </div>

      <div>
        <label>askldak asd ls</label>
        <input/>
      </div>
      <div>
        <label>askldakasda asdls</label>
        <input/>
      </div>
    </div>
  </div>
  <div class="b">b</div>
</div>

＆＃13;

如果您希望label具有相同的尺寸，则可以执行以下操作：

＆＃13;

.form div {
  display: flex
}
.form div label {
  flex: 1
}
.form div input {
  flex: 4
}

＆＃13;

<div>
  <div class="a">
    <div class="form">
      <div>
        <label>a</label>
        <input/>
      </div>
      <div>
        <label>askldak asd ls</label>
        <input/>
      </div>
      <div>
        <label>askldakasda asdls</label>
        <input/>
      </div>
    </div>
  </div>
  <div class="b">b</div>
</div>

＆＃13;

右对齐输入标签

编辑1

1 个答案: