display div next to label without breaking line_问答_开发者

display div next to label without breaking line

开发者 https://www.devze.com 2023-03-07 17:10 出处：网络

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.

相关专题：css

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>

<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!

display div next to label without breaking line

精彩评论

关注公众号

热门标签

图文推荐

display div next to label without breaking line

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：