logo标签列表

如何将两个输入框对齐到同一行的两端？

htmlcssinputcss-float
3

我在将两个输入框放在同一行时遇到了问题。每当我将其中一个浮动到右侧时，它就会立即推到下一行。

如何使左侧有一个输入框，右侧对齐的另一个输入框，而不会被推到下一行？

JS Fiddle 这里

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

2
在两个元素上使用display: inline;，其中一个元素使用float: left，另一个元素使用float: right，并且在两个元素上设置合理的宽度。在容器上使用display: table，然后在两个元素上使用display: table-cell，还有很多其他的方法。你的代码看起来很混乱。 - Sergiu Paraschiv
1
在你上一个 CSS 选择器 .footer, .push { 中有个拼写错误。 - j08691
4个回答
5
这是因为你的第二个输入字段被包含在 p 元素内部。移除它将解决你的问题。
<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>
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>

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>

这里是 JSFiddle 的演示

@Jimmy，这里是更新后的jsfiddle链接（https://jsfiddle.net/5fv26bz9/5/），其中第二个文本框向右浮动。 - Ahs N
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接