Как выровнять два поля ввода на одной и той же строке, но заканчивается

У меня возникли проблемы с выравниванием двух полей ввода на одной строке, всякий раз, когда я плаваю один вправо, он сразу же подталкивает его к следующей строке.Как выровнять два поля ввода на одной и той же строке, но заканчивается

Как я могу иметь два поля ввода на ту же линию, один слева и один выровненные вправо без его толкнули к следующей лин

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>

источник

2015-08-05 Jimmy

'дисплей: встроенный;' на оба, 'поплавок: left' на одном,' поплавок: right' на других и некоторых разумных ширинах, установленных на оба, 'дисплей: table' на контейнере, а затем 'display: table-cell' на обоих и множество других способов. У вас там беспорядок. –

Typo в последнем CSS-селекторе '.footer, .push {' – j08691

Это происходит потому, что ваше второе поле ввода обернуто внутри элемента. Удаление этого исправляет проблему.

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

источник

2015-08-05 15:04:10 Josh

Это то, что я сделал:

<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

источник

2015-08-05 15:04:27

@Jimmy И [здесь обновлен jsfiddle] (https://jsfiddle.net/5fv26bz9/5/), где второе текстовое поле плавает вправо –

Вы, кажется, есть много оберточной элементов там.

Простейший вариант woud, похоже, просто для того, чтобы плавать влево и вправо.

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>

источник

2015-08-05 15:04:28

Как выровнять два поля ввода на одной и той же строке, но заканчивается

ответ

Смежные вопросы