Question

当我在标题中插入输入元素时，我有一个特殊样式问题的表。它没有准确地使输入居中;相反，它在右侧偏离了2个像素。我有一些Twitter Bootstrap样式应用于表，但我找不到导致问题的那个，所以我不认为它与它有任何关系。这是标记：

<thead>
    <tr>
        <th scope="col" style="width: 5%;">
            <a href="#">ID</a>
            <input type="text" value="" class="grid-filter" id="id-filter">
        </th>
    ...

这是问题的图片（大幅放大）：

enter image description here

以下是应用的样式：

th { 
    width: 15%; 

    a { display: block; }

    input {
        height: 15px;
        line-height: 15px;
        margin: 0;
        padding: 5px 0;
        width: 100%;
    }
}

在上图中，我使用的是Firebug并专注于“ID”锚点。正如您所看到的，锚点在th中正确居中，但由于某种原因，输入框在右侧有额外的2个像素。为什么是这样？奇怪的是，这不会影响选择元素，只影响输入元素。

更新：当我设置边框和轮廓时，Bootstrap的焦点发光也有边框。不确定要覆盖的样式......

enter image description here

Answer 1

编辑：看起来问题是您的width属性。查看this JSFiddle

HTML：

<table>
    <thead>
        <tr>
            <th scope="col" style="width: 5%;">
                <a href="#">ID</a>
                <input type="text" value="" class="grid-filter" id="id-filter"/>
            </th>
        </tr>
    </thead>
</table>

CSS：

a, input {    
    padding: 0;
    margin 0;
}

a { 
    display: block;
    background: red;     
}

input {
    height: 15px;
    line-height: 15px;
    /* width: 100%; */
}

table { width: 3em }

width上的input属性默认为auto，在这种情况下可以执行您想要的操作。

表格中输入的宽度问题

1 个答案: