Question

我试图让一个文本字段加上它的父容器的按钮全宽。

HTML

<div class="container">
    <form method="POST">
        <input type="text" name="searchit" id="homesearch" placeholder="Search here..." /><!----><input type="submit" name="searchitSubmit" id="homebtn" value="Search" />
    </form>
</div>

CSS

.container{
    max-width:1200px;
}
#homesearch{
    border:1px solid #e4e4e4;
    display:inline-block;
    padding:10px;
    border-radius:5px;
    outline:none;
    width:700px;
    border-right:none;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
}
#homesearch:focus{
    border:1px solid #b8181e;
    border-right:none;
}
#homebtn{
    display:inline-block;
    background-color:#EC1D25;
    padding:10px 20px;
    border-radius:5px;
    border-top-left-radius:0px;
    border-bottom-left-radius:0px;
    border:1px solid #e4e4e4;
    color:white;
    font-weight:bold;
    border:1px solid #b8181e;
}
#homebtn:hover{
    background-color:#b8181e;
}
#homebtn:active{
    background-color:#b8181e;
    box-shadow:inset 0 0 10px rgba(0,0,0,0.3);
}

我可能想到这样做的唯一可行方法是使用jQuery，但我想看看我是否可以避免这种情况并且纯粹是CSS。如果没有，那么通过jQuery的解决方案将是可行的。

Answer 1

首先，我以百分比形式给出您的输入和按钮width（例如70％/ 30％）。

我还在输入中添加float:left，在按钮上添加float:right。

我最后在两个元素上添加了一个box-sizing:border-box;，以防止你的填充过大。

JSFiddle

创建一个文本字段加上一个全宽按钮

1 个答案: