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>

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

你似乎有很多包装元素。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

Answer 4

您只需要添加display：inline-flex

enter image description here

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

4 个答案: