Question

我有一个'row'div，基本上包含一个标签，一个文本输入，一个超链接。我的问题是我希望输入的宽度始终填充标签和超链接之间的可用宽度。我尝试了很多方法，但只有各种形式的失败。我怀疑也许我可以使用某种边距巫术来使a标记不是absolute，并且始终input整齐地绑定lable和{{1}但是，我现在完全不知道下一步该尝试什么。

这是我的HTML：

这是CSS：

<fieldset id="ctl00_cph_previousContacts" class="previousContactsArea">
  <legend>Previous Contacts</legend>
  <div class="email-row">
    <label for="ctl00_cph_addressTo">To</label>
    <input name="ctl00$cph$addressTo" type="text" id="ctl00_cph_addressTo" class="email-address text" />
    <a href="#" id="ctl00_cph_addToAddressTo">Add...</a>
    <span id="ctl00_cph_addressToValidator" dynamic="True" style="display:none;"></span>
  </div>      
</fieldset>

Answer 1

Flexbox可以做到这一点

＆＃13;

.email-row {
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
}
.email-row label {
  flex: 0 0 50px;
  text-align: center;
}
.email-row input {
  flex: 1;
}
.email-row a {
  flex: 0 0 50px;
  margin-left: 10px;
}

＆＃13;

<fieldset id="ctl00_cph_previousContacts" class="previousContactsArea">
  <legend>Previous Contacts</legend>
  <div class="email-row">
    <label for="ctl00_cph_addressTo">To</label>
    <input name="ctl00$cph$addressTo" type="text" id="ctl00_cph_addressTo" class="email-address text" />
    <a href="#" id="ctl00_cph_addToAddressTo">Add...</a>
    <span id="ctl00_cph_addressToValidator" dynamic="True" style="display:none;"></span>
  </div>
</fieldset>

＆＃13;

JSfiddle Demo

Answer 2

请添加css的流动css结尾：

div.email-row {max-width：30％;浮动：左;余量右：20像素}

请参阅以下链接以获取更多详细信息： http://www.cssdesk.com/gDzpd

使文本输入填充一行中两个其他元素之间的可用空间

2 个答案: