0

我想在彼此下方显示两个输入字段，没有边距、没有填充和没有双边框（所以它看起来很像一个常规表格，每个字段之间有一条分隔线）。

margin-top: 0px; margin-bottom: 0px;删除 边距很容易border-top-width: 0px;（这种效果在所有浏览器中都会发生。

这是一个示例：HTML

<div class="test">
    <input type="text" value="Test" />
    <br />
    <input type="text" value="Test" />
</div>

CSS：

input {
    margin-top: 0px;
    margin-bottom: 0px;
}
.test input {
    border-top-width: 0px;
}
.test input:first-child {
    border-top-width: 2px;
}

提琴手： http: //fiddle.jshell.net/32een/1/

图片解释了我想要什么：

在此处输入图像描述

4

5 回答 5

1

试试这个：

.test input {
    border-top: 0;
}
.test input:first-child {
    border-top: 2px solid #ccc;
}

此外，在您的代码中，您可以将“0px”替换为“0”，以进行优化。

于 2013-02-20T17:03:46.610 回答
0

如果你对桌子没问题...

<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    <tr>
        <td style="border:1px solid red;"><input type="text" value="" style="border: 0; width: 100%;" /><br /></td>
    </tr>
    <tr>
        <td style="border:1px solid red;"><input type="text" value="" style="border: 0; width: 100%;" /></td>
    </tr>
</table>

这是效果

富

于 2013-02-20T17:03:53.193 回答
0

重新定义浏览器边框样式：

input {
    margin-top: 0px;
    margin-bottom: 0px;
    outline: 0;
    padding: 0;
    border: 1px solid #cccccc;
}

UPD：并删除零值的“px”。

于 2013-02-20T17:08:12.267 回答
0

当您开始设置输入元素的样式时，就会发生这种情况。

浏览器通常有两个默认的输入。如果您根本不设置样式，则使用一种带有细边框（有时还有发光效果）的现代外观，以及在您触摸样式时默认使用的一种带有厚内嵌边框的古代外观。

所以，如果你想给边框设置样式，你必须指定一个完整的样式，包括样式、宽度和颜色，以获得你想要的外观。

就像是：

.test input {
  border: 1px solid #ccc;
  border-top-width: 0;
}
.test input:first-child {
  border-top-width: 1px;
}
于 2013-02-20T17:08:15.933 回答
0

您应该尝试使用内容可编辑的 div。这样，您可以根据需要设置输入样式。我在您的 jsfiddle 中执行了以下操作，并且有效。

HTML：

<div class="test">
    <div class="input" contenteditable="true">Test</div>
    <div class="input" contenteditable="true">Test</div>
</div>

CSS：

.input {
    display: block;
    border: 1px solid #000;
    width: 100px;
    margin-bottom: -1px;
}

这给出了您想要的外观

于 2013-02-20T17:11:55.087 回答