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;
}
答案 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%;
}
以下是工作样本:
但如果你想在选择之后提交提交按钮,那么你可以看到:
答案 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>