html - 选择元素样式问题

Question

具有用户文本输入和提交按钮表单样式的表单非常好。

现在我需要在同一个表单中添加一个下拉框。添加下拉菜单后，样式不完善。

请帮我解决同样的问题。

我的 HTML 代码:

<form class="form-wrapper cf" id="cf-form">

    <select name="amt">
        <option value="10">Mobile Phones</option>
        <option value="20">Tablets</option>
        <option value="50">Camera</option>
    </select>
    <input type="text" id="valbox" placeholder="Search here..." required>
    <button type="submit" id="butval">Search</button>
</form>

我的 CSS 文件:

.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 15%;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   
/* Form text input */

.form-wrapper input {
    width: 85%;
    height: 100%;
    padding: 40px 5px;
    float: left;    
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;      
}
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}

Answer 1

您应该学习一些 CSS3 教程。

看看这个fiddle - 我对齐了你的元素...

刚刚添加:

.form-wrapper select {
    float: left;   
    width: 15%;
}

并在 .form-wrapper input 中更改了这两个

width: 66%;
padding: 40px 2%;