6

我需要用一些输入创建一行，并确保它们总是填充 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 相同，并且出现在第二行。

我怎样才能让它们都出现在同一行？

提琴手

4

5 回答 5

16

只需一点 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 示例

于 2013-08-23T13:25:23.320 回答
1

当您使用 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 文件中为类分配属性。

于 2013-08-23T13:24:25.580 回答
0

您可以尝试从按钮填充您的 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>
于 2013-08-23T13:28:04.490 回答
0

如果您有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）

我已经用最快的解决方案更新了您的演示，为您提供所需的结果。

于 2013-08-23T13:29:42.137 回答
0 
<b
   style={{
          fontFamily: "arch",
          fontSize: 50
              }}>
</b>


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

像这样你可以在JSX中做

于 2020-05-03T08:21:35.977 回答