Question

我需要创建一个包含少量输入的行，并确保它们始终填充div，我已将width:100%添加到最后一个输入

<div style="width:300px;background:#eee;height:30px">
    <input value="first" style="width:80px" type="button"/>
    <input value="second" style="width:80px" type="button"/>
    <input value="last" style="width:100%" type="button"/>
</div>

此样本无法正常工作，因为最后一个输入宽度与div相同，它出现在第二行。

如何让它们全部出现在同一行？

Jsfiddle

Answer 1

使用一点CSS就可以做到这一点。将最后一个输入换行并添加此CSS：

<div style="width:300px;background:#eee;height:30px;">
    <input value="first" style="width:80px" type="button"/>
    <input value="second" style="width:80px" type="button"/>
    <span id="last"><input value="last" style="width:100%" type="button" /></span>
</div>
#last {
    overflow:auto;
    display:block;
}
input {
    float:left;
}

<强> jsFiddle example

Answer 2

使用width：100％时，会填充包含输入的div。将它们全部放入内部的最佳方法是在输入之间均匀分配div宽度，并将它们浮动，使它们彼此相邻。

<div style="width:300px;background:#eee;height:30px">
<input value="first" style="width:100px, float: left;" type="button"/>
<input value="second" style="width:100px" type="button"/>
<input value="last" style="width:100px, float: right;" type="button"/>
</div>

语法可能不完全正确，我很少使用内联CSS，更好的是只提供输入和类，然后在.css文件中为类分配属性。

Answer 3

您可以尝试从按钮

填充div

<div style="width:300px;background:#eee;height:30px">
    <input value="first" style="width:80px" type="button"/>
    <input value="second" style="width:80px" type="button"/>
    <input value="last" style="width:132px" type="button"/>
</div>

Answer 4

如果您想要渲染N个孩子以适合某个宽度，那么您需要将他们各自的宽度设置为100% / N，例如100% / 3 ~33.33333 ％但是，（除非您设置了box-sizing: border-box/padding-box），您还需要考虑边距，边框和填充。此外，如果您的元素为display: inline或display: inline-block，则源中它们之间的空格也会占用空间。你需要通过

来反击这个空白

将其删除
使用margin-right: -0.4em或某些有效的值撤消
float您的元素（实际设置display: block）

我updated your demo使用最快捷的解决方案为您提供所需的结果。

Answer 5

<b
   style={{
          fontFamily: "arch",
          fontSize: 50
              }}>
</b>


<div style={{
                marginTop: 20,
                marginLeft:"280px",
                marginRight:"80px",
                fontSize: 40}}>
</div>

就像您可以在 JSX

中那样

CSS显示输入内联（最后输入宽度：100％）

5 个答案: