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%;

选择元素样式的问题

1 个答案: