0

当我在标题中插入输入元素时，我有一个表格有一个特殊的样式问题。它不会精确地居中输入；相反，它在右侧偏离了 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>
    ...

这是问题的图片（放大了很多）：

在此处输入图像描述

以下是应用的样式：

th { 
    width: 15%; 

    a { display: block; }

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

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

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

在此处输入图像描述

4

1 回答 1

1

编辑：看起来问题是你的width属性。检查这个 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属性，在这种情况下可以执行您想要的操作。inputauto

于 2013-11-04T17:42:53.153 回答