【问题标题】:Liquid textfield width液体文本字段宽度
【发布时间】:2011-03-05 04:12:19
【问题描述】:

我有这个相当简单的表格:

<form action="...">
    <div>
        <input type="text" class="input-text" value="" name="text" />
        <input type="submit" class="submit" value="Submit" />
    </div>
</form>

表单位于固定宽度的 div 内(以 ems 指定)。

我希望文本字段和按钮为单行,但即使我指定了其size 属性,跨浏览器的文本字段宽度也不一致。不想指定确切的宽度(特别是对于按钮)我想知道是否可以给文本字段一个液体宽度?我希望文本字段可以拉伸,以便它和按钮都可以放在一行上。

【问题讨论】:

    标签: css width textfield liquid-layout


    【解决方案1】:

    是的,length 用于字符计数,而不是宽度。

    您希望文本框填满按钮占用空间之外的所有可用空间吗?这可以通过一张桌子来实现(但我一直在 Stack Overflow 上因为建议桌子而受到嘘声)。我们假设您使用带有 display:table 的 DIV,但为了简单起见,我将使用实际的表标记来说明。

    <table cellpadding=0 cellspacing=0 width=100%>
      <tr>
          <td><input type="text" style="width:100%"></td>
          <td style="width:0"><input type="submit"></td>
      </tr>
    </table>
    

    按钮单元格上的宽度 0 可能看起来很奇怪,但表格单元格的宽度仅作为建议。不管你做多瘦,它都会拉伸以适应内容。

    【讨论】:

    • 我应该补充一点,通常最好不要对 HTML/CSS 进行微观管理。如果是我,只需在 ems 中给文本框一些固定宽度就足够了。如果您的设计师坚持文本框和按钮与右边缘齐平,也许您需要一个新设计师?
    • 这就是我最终要做的,尽管我使用了带有“display: table”等样式的div。但是对于输入,是否可以直接使用“display: table-cell”来设置它们的样式而不是将它们包装在 td 中?我从来没有使用过这种方法,但我被它所吸引,因为它意味着更少的 div。
    • 它可能不是表格数据,但它是当前版本的 HTML 和 CSS 无法正确解决的经常性问题的实用解决方案。
    【解决方案2】:

    如果您保留默认提交按钮样式,则其宽度会因浏览器而异。这也意味着您寻找的文本字段的宽度是一个变量。

    • FF:47px + 3px 边框
    • Chrome:45px + 2px 边框
    • IE8:63px + 8px padding + 3px 边框
    • IE7:61px + 2px 边框

    没有优雅的方法可以做到这一点,但您有以下选择:

    • 使用表格(Google 使用表格作为其搜索框)。
    • 为输入字段和提交按钮设置样式(不推荐)。
    • 使用脚本(不推荐)。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-02-01
      • 2014-07-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-09-10
      • 2010-12-16
      相关资源
      最近更新 更多