Question

我正在尝试设置输入标记和DIV标记的样式。 DIV必须低于输入，并且它们需要具有相同的宽度。但是，无论我做什么 - DIV都比INPUT小一个像素。

这不应该发生，特别是如果（在这个例子中）两个对象共享相同的CSS类。我知道如何编写CSS代码。我只是不知道是什么原因导致输入框略大一些。

我已经在这里做过准备：http://jsfiddle.net/r8pty4a8/

编辑：我不能简单地用像素偏移。该设计使用大众单位，这是一个“响应”的CSS3测量单位。 1VW =视口宽度的1％。

<div style="width: 100%; position: relative">
    <input type="text" class="MyStyle" />
    <div class="MyStyle">Foo</div>
</div>

.MyStyle
{
    height: 6.09375vw;
    line-height: 6.09375vw;
    font-size: 3.05vw;
    padding-left: 2.013vw;
    width: 80vw;
    border: .4vw solid red;
    border-top-left-radius: .3vw;
    border-top-right-radius: .3vw;
    clear: both;
}

Answer 1

您忘记在padding-top元素上考虑默认padding-bottom / input。

在Chrome中，该元素的默认padding-top / padding-bottom为1px。

Updated Example - 两个元素现在都有相同的高度。

.MyStyle {
    padding-top: 0;
    padding-bottom: 0;
    height: 6.09375vw;
    line-height: 6.09375vw;
    font-size: 3.05vw;
    padding-left: 2.013vw;
    width: 80vw;
    border: .4vw solid red;
    border-top-left-radius: .3vw;
    border-top-right-radius: .3vw;
    clear: both;
}

你也可以使用速记 - padding: 0 0 0 2.013vw。 (example)

样式INPUT [“Text”] vs DIV - 输入略大

1 个答案: