Div с выравниванием по полю

У меня есть немного проблемы, и я, похоже, не могу понять, что я сам по себе.Div с выравниванием по полю

Как я могу иметь контейнер контейнера шириной 100%, который имеет поле ввода и поле ввода, выровненное вправо, кажется, что мой текущий результат заключается в том, что групповой бокс переопределяет мою желаемую ширину div и таким образом растягивает ее на 100% на рис. : enter image description here

Это мой желаемый результат: enter image description here

<!DOCTYPE html> 

<html> 

<head> 

</head> 

<body> 
<div style="width: 100%;"> 

    <div style="width: auto; text-align: right;"> 

     <fieldset style="padding: 5px; border: 1px solid rgb(128,128,128);"> 
      <legend style="color: rgb(11,63,113); font-weight: bold; font-size: 11pt;">File Number</legend> 
      <input type="text" id="fileno" style="background: white url(images/glass.png) left no-repeat; padding-left: 19px;" onkeydown="handleKeyDown(event,this)"> 
     </fieldset> 

    </div> 


</div> 
</body> 

</html>

источник

2013-11-20 Jason Kelly

Ваш набор полей на уровне блоков и по умолчанию 100%. Дайте ему фиксированную ширину, поплавьте его или измените его отображение на встроенный блок. – Moob

Вам просто нужно применить ширину элемента к множеству поля и положите его вправо.

<div style="width: 100%;"> 

    <div style="width: auto; text-align: right; border: 1px solid red; height: 75px;"> 

     <fieldset style="padding: 5px; border: 1px solid rgb(128,128,128) width: 200px; float: right"> 
      <legend style="color: rgb(11,63,113); font-weight: bold; font-size: 11pt;">File Number</legend> 
      <input type="text" id="fileno" style="background: white url(images/glass.png) left no-repeat; padding-left: 19px;" onkeydown="handleKeyDown(event,this)"> 
     </fieldset> 

    </div>

DEMO используя ваш код.

источник

2013-11-20 13:54:12

есть множество решений. Основная проблема заключается в том, что внутренний div равен display: block и создает целый блок (занимает всю ширину даже с width: auto. Одна из возможностей - это изменить его на display: inline-block. Вы также можете использовать text-align: right на внешнем div, чтобы иметь его с правой стороны как вы хотите.

http://jsfiddle.net/At63D/

вы также можете float: right внутренней DIV, но вы должны применить clearfix к наружному дел.

источник

2013-11-20 13:52:31

Div с выравниванием по полю

ответ

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