Question

我想在其旁边投下一个标签并输入文字输入文本必须在div内 - 稍后我想在div中添加元素我使用float来显示标签/

旁边的div

这是我的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>

问题是我在文本之前得到了div。

http://jsfiddle.net/2wNbR/

我该如何解决？

更新
我实际上想要使用我写的自动完成插件而不是输入文本。自动完成使用div。我不想为标签创建“先决条件”，因此在标签周围添加<span style="float:right"></span>等解决方案并不好。

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

Answer 1

<div style="display:inline-block;"><input type="text" /></div>

您还可以查看<label> html元素。

Answer 2

只需在标签周围放一个<span>并浮动它，记得清除它。

<span style="float: left;">label: </span><div style="float:left;"><input type="text" /></div>

Answer 3

label: <span><input type="text" /></span>

或

<div style="float:left">label:</div><div><input type="text" /></div>

会有所帮助，但如果您能说出目的，您将更有可能获得适当的答案

Answer 4

我猜这张海报实际上是使用coldfusion并使用<cfinput>而不是<input> - 如果是这种情况，那么这就是场景：

您有一个带有autosuggest =值的<cfinput>标记，并且您希望在输入字段的左侧放置一个文本标签。

带有autosuggest的

<cfinput使用ajax并自动添加样式化的ajax div，包括添加cf.css样式的float:left;。

解决这个问题的一种方法是在表格中包含标签和cfinput，每个表格都在自己的<td>中。

所以<table border=0><tr><td>label:</td><td><cfinput autosuggest="value1,value2,etc" name="inputname"></td></tr></table>

应该这样做！

在标签旁边显示div而不会破坏线条

4 个答案: