如何在同一行但两端对齐两个输入框答案

【问题标题】：How to align two input boxes on same line but either ends如何在同一行但两端对齐两个输入框
【发布时间】：2015-08-05 14:58:57
【问题描述】：

我无法在同一行上对齐两个输入框。每当我向右浮动一个时，它会立即将其推到下一行。

如何在同一行有两个输入框，一个在左边，一个在右边对齐，而不被推到下一行？

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>

【问题讨论】：

display: inline; 在两者上，float: left 在一个上，float: right 在另一个上，并在两者上设置一些合理的宽度，display: table 在容器上，然后在两者上display: table-cell，还有很多的其他方式。你那里一团糟。
最后一个 CSS 选择器中的错字.footer, .push {

标签： html css input css-float

【解决方案1】：

发生这种情况是因为您的第二个输入字段被包裹在一个元素内。删除它会解决您的问题。

<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>

【讨论】：

【解决方案2】：

你那里似乎有很多包装元素。

最简单的选择似乎就是让它们左右浮动。

input {
  width: 15%;
  font-weight: bold;
  background-color: transparent;
  border: 1px solid;
  font-size: 13px;
  font-family: Arial;
  float: left;
}
* {
  margin: 0;
}
input:last-child {
  float: right;
}

<div class="wrapper">
  <input class="inputbold" type="text" name="" placeholder="boldinput" />
  <input class="inputbold" type="text" name="" placeholder="blah" />
</div>

【讨论】：

【解决方案3】：

这就是我所做的：

<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>

Here is the JSFiddle demo

【讨论】：

@Jimmy And here is an updated jsfiddle 第二个文本框向右浮动

【解决方案4】：

你只需要添加 display:inline-flex

enter image description here

【讨论】：