Html 在下拉列表前添加文本标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9762462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a text label in front of dropdown list
提问by thinkanotherone
I am trying to add a label in front of a select box, I have set the div tag that contains both element to be "inline-block". But, the span is still on top of the select box.
我试图在选择框前面添加一个标签，我已将包含两个元素的 div 标签设置为“内联块”。但是，跨度仍然在选择框的顶部。
<div class="unselected-field" style="display: inline-block;" id="selectCountry">
<span>test</span><select id="countrySelect" name="countrySelect"></select>
</div>
Any ideas ? I am on Chrome...
有任何想法吗 ？我在 Chrome 上...
采纳答案by Joseph
if the <select>'s width plus the <span>'s width is greater than the containing <div>, the <select>will be forced to go below the <span>instead of being beside it. also, <select>'s width relies on the text that it contains, so it can have a varying width unless you give it a static width.
如果<select>的宽度加上<span>的宽度大于包含的<div>，则<select>将被迫低于<span>而不是在其旁边。此外，<select>的宽度取决于它包含的文本，因此除非您给它一个静态宽度，否则它可以具有不同的宽度。
回答by SmithMart
I usually wrap the label around the input:
我通常将标签包裹在输入周围：
<div class="unselected-field" style="display: inline-block;" id="selectCountry">
<label>Test:<select id="countrySelect" name="countrySelect">
<option>Option 1</option>
</select>
</label>
</div>?
回答by tokhi
One option would be to just disablethe first selected option:
一种选择是仅disable选择第一个选项：
<select id="countrySelect" name="countrySelect">
<option disabled selected>Select Your Country:</option>
<option>USA</option>
<option>Germany</option>
<option>France</option>
</select>
回答by Justin Pihony
Could you post the code in unselected-fieldbecause I was able to get this to display properly in Chrome http://jsfiddle.net/tVT67/
你能把代码贴出来吗，unselected-field因为我能让它在 Chrome http://jsfiddle.net/tVT67/ 中正确显示
In fact, I can even remove the inline-blockand it still works http://jsfiddle.net/H3GDN/
事实上，我什inline-block至可以删除它，它仍然有效 http://jsfiddle.net/H3GDN/
回答by Turnip
Works fine for me http://jsfiddle.net/KG9hL/1/
对我来说很好用http://jsfiddle.net/KG9hL/1/
Unless of course the containing divs width is less than the combined width of the labeland selectelements: http://jsfiddle.net/74bRX/
除非当然包含div的宽度小于label和select元素的组合宽度：http: //jsfiddle.net/74bRX/
