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

Question

HTML select 和 input 在一行中

我想在同一行中包含select option 和input submit 按钮。以下适用于两个 input 标记，但不适用于 input 和 select。请帮我将这两个标签对齐在一行中。

这是我的 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;
}

Answer 1

试试这个 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。只是清洁它就会有很大的不同，现在你可能需要一些样式，也许让那个巨大的按钮更小，或者让选择更大