将文本框放在另一个下面,没有任何间距

时间:2012-12-16 16:31:29

标签: html css

我有2个文本框(一个在另一个之上),我想消除它们之间的差距。我希望在这里实现文本框的外观 dribble

HTML

<div id="User-Details">
    <input type="text" class="textbox-top" id="name" value="Name" />
    <input type="text" class="textbox-bottom" id="email" value="Email" />
</div>

CSS

#User-Details input
{
    padding: 5px;
    color: #999
}

.textbox-top{
    border: 1px solid #aaa;
    border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.textbox-bottom{
    border: 1px solid #aaa;
    border-top: none;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

1 个答案:

答案 0 :(得分:2)

尝试这样,很容易

Demo

HTML

<div>
    <input type="text" placeholder="Username" /><br>
    <input type="text" placeholder="Password" />
</div>

CSS

div {
    position: relative;
    height: 80px;
    width: 300px;
    margin: 20px;
}

input[type=text] {
    padding: 5px;
    border: 1px solid #eeeeee;
}

input[type=text]:nth-child(1) {
    border-bottom: 0;
}