我无法在同一行上对齐两个输入框。每当我向右 float 一个时，它会立即将其推到下一行。
如何在同一行上有两个输入框，一个在左侧，一个在右侧对齐，而不会被推到下一行？
JS Fiddle Here
.inline {
display: inline;
}
input {
width: 15%;
font-weight: bold;
background-color: transparent;
border: 1px solid;
font-size: 13px;
font-family: Arial;
}
html {
height: 100%;
margin-bottom: 0px;
}
* {
margin: 0;
}
.body {
font-family: Arial;
font-size: 13px;
background-color: #ffffff;
margin-top: 0px;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 0px;
padding: 0 height: 100%;
line-height: 200%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
line-height: 120%;
height: 112px;
/* .push must be the same height as .footer */
text-align: center;
font-size: 10px;
}<body>
<div class="body">
<div class="wrapper">
<span class="inline">
<input class="inputbold" type="text" name="" placeholder="boldinput" />
<div style="text-align: right;">
<input class="inputbold" type="text" name="" placeholder="blah"/>
</div>
</span>
</div>
</div>
</body>最佳答案
发生这种情况是因为您的第二个输入字段包含在元素内。删除它会解决您的问题。
<div class="body">
<div class="wrapper">
<span class="inline">
<input class="inputbold" type="text" name="" placeholder="boldinput" />
<input class="inputbold" type="text" name="" placeholder="blah"/> </div>
</span>
</div>
</div>
关于html - 如何在同一行但两端对齐两个输入框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31836068/