在内容框剩余宽度中输入标签

时间:2018-05-03 08:54:55

标签: html css width

我的自定义内容框样式有些麻烦。内容框包含几个labelinput字段。内容框的width为“500px。

部分labels比其他<div class="content"> <div class="row"> <label for="test1">This is a test #1</label> <input type="text" name="test1"> </div> <div class="row"> <label for="test2">This is a test #2</label> <input type="text" name="test2"> </div> <div class="row"> <label for="test3">But this is a test with a much longer label</label> <input type="text" name="test3"> </div> </div> 更长,但输入应始终与窗口一样大( - 有点白色空间)。

这是我现在的HTML:

.content {
    border: 1px solid #000;
    width: 500px;
    height: 500px;
}

.row {
    margin-top: 5px;
}

input {
    width: 385px;
}

这就是CSS:

'rows'

正如此处的小提琴所示:https://jsfiddle.net/4ga3533o/您可以看到前2个input正常工作,但是第三个label低于CREATE TABLE Sample ( Scientist_Num varchar2(5) not null, Recorded_On date not null, Site_ID varchar2(4) not null, Comments clob, Primary key (Scientist_Num, Recorded_On), FOREIGN KEY (Scientist_Num) REFERENCES Scientist(Scientist_Num), FOREIGN KEY (Site_ID) REFERENCES Site(Site_ID) ); CREATE TABLE Measurement ( Site_ID varchar2(4) not null, Recorded_On date not null, Name varchar2(10) not null, Value varchar2(10), Outlier_Indicator varchar2(10), Primary key (Site_ID, Recorded_On, Name), FOREIGN KEY (Site_ID) REFERENCES Sample(Site_ID), FOREIGN KEY (Recorded_On) REFERENCES Sample(Scientist, Recorded_On, Site_ID) ); 因为宽度比内容框长,我怎么能让它工作,所以标签可以有不同的长度,但宽度只占用宽度的剩余空间?

2 个答案:

答案 0 :(得分:2)

您可以 flex

.content {
  border: 1px solid #000;
  width: 500px;
  height: 500px;
}
.row {
  margin-top: 5px;
  display: flex;
}
input {
  flex: 1;
}
label {
  margin-right: 10px;
}
<div class="content">
  <div class="row">
    <label for="test1">This is a test #1</label>
    <input type="text" name="test1">
  </div>
  <div class="row">
    <label for="test2">This is a test #2</label>
    <input type="text" name="test2">
  </div>
  <div class="row">
    <label for="test3">But this is a test with a much longer label</label>
    <input type="text" name="test3">
  </div>
</div>

答案 1 :(得分:1)

display: flex将是您问题的最佳解决方案。试试这段代码。

<div class="content">
  <div class="form-wrap">
    <label for="test1">This is a test #1</label>
    <input type="text" name="test1">
  </div>
  <div class="form-wrap">
    <label for="test2">This is a test #2</label>
    <input type="text" name="test2">
  </div>
  <div class="form-wrap">
    <label for="test3">But this is a test with a much longer label</label>
    <input type="text" name="test3">
  </div>
</div>

.content {
  border: 1px solid #000;
  width: 500px;
  height: 500px;
}

.row {
  margin-top: 5px;
}

input {
  width: 385px;
}

.form-wrap {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

.form-wrap label {
  width: 40%;
}