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

Question

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

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

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

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

Answer 2

这是我做的：

<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

Answer 3

你那里好像有很多包装元素。

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

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>

Answer 4

您只需添加 display:inline-flex

enter image description here

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

How to align two input boxes on same line but either ends

html

css

input

css-float