Question

我一直在布局GUI，并发现我对<asp:TextBox />控件的渲染感到困惑。似乎某些默认边距被添加到ASP.NET TextBox呈现的<input>控件的左侧和右侧。下面是我的代码示例。结果<input>元素不会与容器<div>齐平，甚至认为它上面的文本元素（“Some Text”）是齐齐的。

<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

我在测试您的示例时没有看到任何问题，TextBox与顶部，右侧和底部{{1>}的边缘齐平（使用 Some Text 左下）。

必须有其他CSS影响您的布局。

我建议使用Firebug，IE的div开发人员工具或Chrome的F12开发人员工具（取决于您的浏览器）来查看已创建的HTML。这应该可以为您提供所需的答案。

Answer 2

我不知道asp对此做了什么，你的p元素在html中是无效的。删除它。

您可能需要在输入元素上将填充或边距设置为零。

您使用的是doctype吗？

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

检查页面顶部是否有正确的 doctype
在文本容器div中使用 vertical-align 样式：<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 5

我发现了问题所在。我正在使用启用了兼容模式的Internet Explorer v8。我不确定为什么它被启用但是一旦我禁用了兼容性模式，文本框就会按照它应该对齐。

输入元素未与DIV容器对齐“flush”

5 个答案: