HTML`select`和`input`在一行中

时间:2014-09-05 01:46:57

标签: jquery html css html5

HTML selectinput在一行

我希望在同一行中有select option个和input submit个按钮。以下内容适用于两个input代码,但不适用于inputselect。请帮我将这两个标签对齐一行。

这是我的HTML

<form method="POST">
    <div id="my_bar">
        <span>
        <input type="submit" id="my_input_submit" value="Submit">
        </span>
        <div id="my_input">
            <select name="my_name">
                <option value="5min">5-Min</option>
                <option value="1hour">Hour</option>
                <option value="1day">Day</option>
            </select>
        </div>
    </div>
</form>

这是我的CSS

#my_bar {
    width: 100%;
    height: 45px;
    overflow: hidden;
    padding-bottom: 0px;
}

#my_bar span {
    height: 100%;
    display: block;
    overflow: hidden;
    padding-left: 0px
}

#my_input {
    height: 100%;
    width: 100%;
    text-align: center;
}

#my_input_submit {
    height: 100%;
    float: right;
}

4 个答案:

答案 0 :(得分:4)

试试这个HTML

<form method="POST">
    <div id="my_bar">
        <input type="submit" id="my_input_submit" value="Submit" />
        <select name="my_name">
            <option value="5min">5-Min</option>
            <option value="1hour">Hour</option>
            <option value="1day">Day</option>
        </select>
    </div>
</form>

和这个CSS:

    #my_bar {
    width: 100%;
    height: 45px;
    display:block;
    padding-bottom: 0px;
}
#my_input {
    height: 100%;
    width: 100%;
    text-align: center;
}
#my_input_submit {
    height: 100%;
}
input, select {
    display:inline-block;
    vertical-align:middle;
}

基本上,你总是把事情弄得一团糟,并在各处添加div和ID。只是清洁它会产生巨大的差异,现在你可能需要一些造型,可能会让那个巨大的按钮更小,或者让选择更大

答案 1 :(得分:1)

按如下方式更新css:

 #my_bar {
    width: 100%;
    height: 45px;
    overflow: hidden;
    padding-bottom: 0px;
}

#my_bar span {
    height: 100%;
    display: inline;
    overflow: hidden;
    padding-left: 0px
}

#my_input {
    height: 100%;
    width: 100%;
    text-align: center;
display: inline;    
}

#my_input_submit {
    height: 100%;
}

以下是工作样本:

http://jsfiddle.net/z5gt4tLe/

但如果你想在选择之后提交提交按钮,那么你可以看到:

http://jsfiddle.net/z5gt4tLe/1/

答案 2 :(得分:0)

为两个表单元素分配相同的类,并为它们提供内联样式

<style>
#my_bar {
width: 100%;
height: 45px;
overflow: hidden;
padding-bottom: 0px;
}
.my_style {
display: inline-block;
}
</style>
<div id="my_bar">
<input type="submit" class="my_style" value="Submit">
<select class="my_style" name="my_name">
<option value="5min">5-Min</option>
<option value="1hour">Hour</option>
<option value="1day">Day</option>
</select>
</div>

答案 3 :(得分:0)

...回到基础,如何使用一个简单的表?

    <table>
    <tr><td>
          <input type="submit" id="my_input_submit" value="Submit">
    </td><td>
        <select name="my_name">
            <option value="5min">5-Min</option>
            <option value="1hour">Hour</option>
            <option value="1day">Day</option>
        </select>
    </td></tr>
    </table>