Элемент ввода не выравнивает "flush" к контейнеру DIV

Question

Я выкладывал графический интерфейс ASP.NET и обнаружил, что меня смущает рендеринг элемента управления <asp:TextBox />.Кажется, что слева и справа от элемента управления <input>, который отображается в ASP.NET TextBox, добавляется поле по умолчанию.Ниже приведен пример моего кода.Результирующий элемент <input> не выравнивается заподлицо с контейнером <div>, даже если текстовый элемент над ним («Некоторый текст») выровнен заподлицо.

<div style="float:left;">
  <b>Some Text</b>
  <asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;"  />
</div>

Совершенно случайно я обнаружил, что еслиСначала я добавил элемент <p /> в качестве первого элемента в <div>, чтобы элемент <input> выровнялся на одном уровне.Вот пример ...

<div style="float:left;">
  <p />
  <b>Some Text</b>
  <asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;"  />
</div>

Кто-нибудь знает, почему это так?Почему элемент <input> не выравнивается вровень с <div>, но при добавлении <p /> делает <div>, который он делает?

ОБНОВЛЕНИЕ - я обнаружил, что проблема заключалась в режиме совместимости с Internet Explorer.Он был включен и поэтому не следовал правилам CSS.После отключения режима совместимости текстовое поле выстроилось правильно.Спасибо за ответы на все вопросы.Они были ВСЕ великолепны и помогли мне отследить проблему.+1 ко всем.Я ответил на пост, чтобы будущие читатели могли легче найти ответ.

Answer 1

1. проверьте правильность doctype в верхней части страницы
2. использовать вертикальное выравнивание стиль в текстовом контейнере div: <span style="vertical-align:middle; font-weight:bold;">Some Text</span>

.

   <div style="float:left;">
      <span style="vertical-align:middle; font-weight:bold;">Some Text</span>
       <asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;"  />
     </div>

Answer 2

Я не знаю, что делает с этим asp, и ваш элемент p недействителен в html, как он есть.Удалите это.

Возможно, вам нужно установить нулевое заполнение или отступ для элемента ввода.

Вы используете тип документа?

Answer 3

Я считаю, что это потому, что <p> является блочным элементом.Вы можете делать то, что хотите, добавив div вокруг своего внутреннего содержимого (вложив div внутри существующего div)

<div style="float:left;">   
    <div>   
        <b>Some Text</b>   
        <asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;"  />
    </div>
</div>

Answer 4

Я не вижу никаких проблем при тестировании вашего примера, TextBox находится на одном уровне с краем div вверху, справа и внизу (с Некоторым текстом внизу слева) .

Должны быть другие CSS, влияющие на ваш макет.

Я бы предложил использовать Firebug, IE F12 инструменты разработчика или Ctrl-Shift-J инструменты разработчика Chrome (в зависимости от вашего браузера), чтобы взглянуть на созданный HTML. Это должно дать вам ответы, которые вам нужны.

Answer 5

Я обнаружил, в чем проблема.Я использовал Internet Explorer v8 с включенным режимом совместимости.Я не уверен, почему он был включен, но как только я отключил режим совместимости, текстовое поле выровнялось так, как должно.