display div next to label without breaking line
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/here is me 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.
http://jsfiddle.net/2wNbR/
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.
UPDATE2
I thought it is not necessary but I see it is importent. Here is the full example: 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"开发者_JS百科 />
<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
<div style="display:inline-block;"><input type="text" /></div>
And you also might want to check the <label> html element.
Just put a <span> around the label and float that too, remember to clear it.
<span style="float: left;">label: </span><div style="float:left;"><input type="text" /></div>
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
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:
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 with autosuggest uses ajax and automatically adds styled ajax divs to, including the cf.css which adds the float:left; style.
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..
so <table border=0><tr><td>label:</td><td><cfinput autosuggest="value1,value2,etc" name="inputname"></td></tr></table>
That should do it!
加载中,请稍侯......
精彩评论