如何将“fill_parent”值设置为元素的宽度？答案

【问题标题】：How can I set "fill_parent" value as an element's width?如何将“fill_parent”值设置为元素的宽度？
【发布时间】：2016-09-21 00:05:28
【问题描述】：

首先我不得不说this 似乎与我的问题相同。但事实并非如此。

我有这个 HTML：

.parent{
  border: 1px solid gray;
  width: 70%;
}

.title{
  border: 1px solid green;
}

.input {
  /* width: fill_parent; */
}

<div class="parent">
  <span class="title">title: </span>
  <input class="input" name="title" type="text" placeholder="عنوان دقیقی انتخاب کنید">
</div>

我所需要的只是设置一个类似于fill_parent 的值作为输入的width。如您所见，.parent 的宽度是基于百分比的，所以它会随着屏幕大小的变化而改变。这就是为什么我不能使用基于px 的值作为.input 的width。

注意： .input{width: 100%;} 不是我要找的，因为我需要将标题和输入保持在同一行。

有什么建议吗？

【问题讨论】：

Bootstrap 有一些很好的功能，看看他们的列系统，否则你不能做得比标题上的 20% 和输入上的 80% 或类似的东西更好

标签： javascript jquery html css

【解决方案1】：

您可以将display:flex; 放在您的父母上，然后将flex:1; 放在您的输入上。

.parent{
  border: 1px solid gray;
  width: 70%;
  display:flex;
}

.title{
  border: 1px solid green;
}

.input {
  flex:1;
}

<div class="parent">
  <span class="title">title: </span>
  <input class="input" name="title" type="text" placeholder="عنوان دقیقی انتخاب کنید">
</div>

【讨论】：