Html 在标签旁边显示 div 而不断线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6081424/
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
display div next to label without breaking line
提问by Naor
I would like to drow a label and input text next to it.
the input text must be inside a div - later I would like to add element to the div.
I am using float in order to display the div next to the label/
我想画一个标签并在它旁边输入文本。
输入文本必须在 div 内 - 稍后我想向 div 添加元素。
我正在使用浮动来显示标签旁边的 div/
here is me html:
这是我的 html：
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" >
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
</head>
<body>
label: <div style="float:left;"><input type="text" /></div>
</body>
</html>
Ihe problem is that I get the div before the text.
我的问题是我在文本之前得到了 div。
How can I fix it?
我该如何解决？
UPDATE
I actually want to use an autocomplete plugin I've wrote instead of the input text. The autocomplete uses a div. I don't want to create a "prerequisite" to the label so solution like add <span style="float:right"></span>around the label are not good.
更新
我实际上想使用我编写的自动完成插件而不是输入文本。自动完成使用 div。我不想为标签创建“先决条件”，因此像<span style="float:right"></span>在标签周围添加这样的解决方案并不好。
UPDATE2
I thought it is not necessary but I see it is importent.
Here is the full example: http://jsfiddle.net/2wNbR/16/
UPDATE2
我认为没有必要，但我认为它很重要。
这是完整的示例：http: //jsfiddle.net/2wNbR/16/
.Autocomplete {
direction: ltr;
}
.Autocomplete, .Autocomplete .Arrow, .Autocomplete .CodeField,
.Autocomplete .SmartField, .Autocomplete .Selector {
float:left;
}
.Autocomplete .Arrow {
background-image:url(drop.gif);
background-position:top right;
height:17px;
width:17px;
cursor:pointer;
}
.Autocomplete .OptionsListHolder {
height:0px;
width:0px;
}
.Autocomplete .OptionsList
{
position:relative;
z-index:999;
top:0px;
right:0px;
border: 1px solid #888888;
font-weight: normal;
font-size: 12px;
font-family: Arial (Hebrew);
}
.Autocomplete .CodeField
{
width:40px;
border: 1px solid #888888;
height:13px;
}
.Autocomplete .SmartField
{
width:auto;
border: 1px solid #888888;
height:13px;
font-weight: normal;
font-size: 12px;
font-family: Arial (Hebrew);
}
Customer:
<div class="Autocomplete">
<input type="text" class="CodeField" />
<div class="Selector">
<input type="text" class="SmartField" />
<div class="Arrow"></div>
<div class="OptionsListHolder">
<select class="OptionsList" size="8">
<option>opt 1</option>
<option>opt 2</option>
<option>opt 3</option>
<option>opt 4</option>
<option>opt 5 - long item text</option>
</select>
</div>
</div>
</div>
<br>
text to check if the OptionsList is override this text
回答by Arjan
<div style="display:inline-block;"><input type="text" /></div>
And you also might want to check the <label>html element.
您可能还想检查<label>html 元素。
回答by Orbling
Just put a <span>around the label and float that too, remember to clear it.
只需<span>在标签周围放一个并浮动它，记得清除它。
<span style="float: left;">label: </span><div style="float:left;"><input type="text" /></div>
回答by sathishn
label: <span><input type="text" /></span>
or
或者
<div style="float:left">label:</div><div><input type="text" /></div>
will help but if you can say the purpose you will more likely get an appropriate answer
会有所帮助，但如果你能说出目的，你更有可能得到合适的答案
回答by Rob
I'm guessing that the poster is actually using coldfusion and using <cfinput>rather than <input>-- if this is the case, here's the scenario:
我猜海报实际上是在使用 Coldfusion 并使用<cfinput>而不是<input>- 如果是这种情况，则场景如下：
You have a <cfinput>tag with an autosuggest= value and you want to put a text label to the left of the input field.
您有一个<cfinput>带有 autosuggest= 值的标签，并且您想在输入字段的左侧放置一个文本标签。
<cfinputwith autosuggest uses ajax and automatically adds styled ajax divs to, including the cf.csswhich adds the float:left;style.
<cfinputwith autosuggest 使用 ajax 并自动添加样式化的 ajax div，包括cf.css添加float:left;样式的 。
One way you can work around this is by surrounding your label and the cfinput in a table, with each in their own <td>'s..
您可以解决此问题的一种方法是将您的标签和 cfinput 放在一个表中，每个都在自己<td>的 ..
so <table border=0><tr><td>label:</td><td><cfinput autosuggest="value1,value2,etc" name="inputname"></td></tr></table>
所以 <table border=0><tr><td>label:</td><td><cfinput autosuggest="value1,value2,etc" name="inputname"></td></tr></table>
That should do it!
应该这样做！
