个人中心
gpt4 book ai didi

html - 在标签旁边显示 div 而不换行

转载 作者：技术小花猫 更新时间：2023-10-29 12:18:57 25 4
gpt4 key购买 nike

我想画一个标签，然后在旁边输入文字。
输入文本必须在 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>周围的标签不好。

更新2
我认为这不是必需的，但我认为它很重要。
这是完整的示例: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

最佳答案 

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

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

关于html - 在标签旁边显示 div 而不换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6081424/

25 4 0
文章推荐： linux - 适用于 Linux 的 Google 地球插件替代品
文章推荐： c - Linux 的 GCC 替代品，支持 OpenMP 和 128 位整数，带 +、-、*、/和 %
文章推荐： php - 在 php 响应中
文章推荐： html - CSS中绝对定位和相对定位之间是否存在父子关系？