Html CSS 显示内嵌输入（最后输入宽度：100%）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18403899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS display inputs in-line (last input width:100%)
提问by AMD
I need to create a line with a few inputs and to be sure they always fill the div, I've added width:100%to the last input
我需要用几个输入创建一行，并确保它们总是填充 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>
This sample is not working fine because the last input width is same as div's and it appears in the second line.
此示例无法正常工作，因为最后一个输入宽度与 div 相同，并且出现在第二行中。
How can I make them all appear in the same line?
我怎样才能让它们都出现在同一行中？
回答by j08691
With a little CSS you can do this. Wrap the last input in a span and add this CSS:
使用一点 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;
}
回答by user5623896726
When you use width: 100%, this fills the div containing the input. The best way to have them all fit inside is the distribute the div width evenly between the inputs, and float them so they all sit next to each other.
当您使用 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>
The syntax might not be exactly right, I rarely use in-line CSS, much better off just giving the inputs and class and then assigning the class with attributes in your .css file.
语法可能不完全正确，我很少使用内嵌 CSS，最好只提供输入和类，然后在 .css 文件中为类分配属性。
回答by Love Trivedi
You can Try for fill your div from button
您可以尝试从按钮填充您的 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>
回答by André Dion
If you have Nchildren that you want to render to fit some width, then you need to set their respective widths to 100% / N, which for your example would be 100% / 3~33.33333% However, (unless you have box-sizing: border-box/padding-boxset) you also need to account for margins, borders and padding. Furthermore, if your elements are display: inlineor display: inline-blockthe whitespace between them in the source will also take up space. You need to counter this whitespace by
如果您有N想要渲染以适合某个宽度的孩子，那么您需要将它们各自的宽度设置为100% / N，对于您的示例，该宽度为100% / 3~33.33333% 但是，（除非您已box-sizing: border-box/padding-box设置）您还需要考虑边距、边框和填充。此外，如果您的元素是display: inline或display: inline-block它们之间的空格在源中也将占用空间。你需要通过
- Removing it
- Undoing it with
margin-right: -0.4emor some value that works floatyour elements (which actually setsdisplay: block)
- 删除它
- 使用
margin-right: -0.4em或一些有效的值撤消它 float你的元素（实际上设置display: block）
I've updated your demowith the quickest solution that gives you your desired result.
我已经用最快的解决方案更新了您的演示，为您提供所需的结果。
回答by Haroon
<b
style={{
fontFamily: "arch",
fontSize: 50
}}>
</b>
<div style={{
marginTop: 20,
marginLeft:"280px",
marginRight:"80px",
fontSize: 40}}>
</div>
LIke this you can do in JSX
像这样你可以在JSX 中做
