CSS: поле ввода (ширина 100%) идет следующей строкой в ​​простом макете с двумя столбцами - PullRequest
Новая
       14

CSS: поле ввода (ширина 100%) идет следующей строкой в ​​простом макете с двумя столбцами

0 голосов
/ 24 марта 2011

У меня есть простой макет в 2 столбца (левый столбик фиксированной ширины 200px, а правый столбец расширяется на 100%).

Если 1-й элемент правого столбца является элементом P, то все нормально.

Но , когда 1-й элемент правого столбца является элементом INPUT (width:100%), он понижается .

Показанный ниже результат (проверено наChrome, FF, IE):

enter image description here

Не могли бы вы объяснить, почему поле INPUT идет на следующей строке, а элемент P - нет? И как исправитьэто?

Код здесь: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title></title>
   <style type="text/css">
      body {background-color: #eeeeee;}
      div.left {float:left; width:200px; border:1px solid #ff0000;}
      div.right {     margin-left:200px; border:1px solid #00ff00;}            
      div.right p, div.right input {width:100%; border:1px dashed #0000ff;}
   </style>
</head>
<body>

   <div>
      <div class="left">
         <p>left div</p>
      </div>
      <div class="right">
         <p>I'm a P 100% width inside right div</p>
      </div>
   </div>

   <br>

   <div>
      <div class="left">
         <p>left div</p>
      </div>
      <div class="right">
         <input name="name" type="text" value="I'm an INPUT 100% width inside right div, why i'm down???">
      </div>
   </div>

</body>
</html>

Ответы [ 2 ]

2 голосов
/ 24 марта 2011

На вашем CSS вы даете margin-left своему правому тегу div без подсчета границ в 1px от размера.

Я попробовал ваш пример самостоятельно с этим CSS: 

<style type="text/css">
  body {background-color: #eeeeee;}
  div.left {float:left; width:200px; border:1px solid #ff0000;}
  div.right {margin-left:202px; border:1px solid #00ff00;}            
  div.right p {width:100%; border:1px dashed #0000ff;}
  div.right input {width:100%; border:1px dashed #0000ff;}
</style>

предоставление места для размещения этого смещения.

Теперь он не будет выглядеть как первый правый тег div, потому что input отображается как встроенный, а не как блок, но вы можете внести это изменение в CSS.

1 голос
/ 24 марта 2011

Я не уверен, почему именно он так обрабатывает, но вы можете заключить свой <input> в <p>, чтобы исправить проблему. 

<div class="right">
         <p><input name="name" type="text" value="I'm an INPUT 100% width inside right div, why i'm down???" /></p>
</div>
...