Question

如何在文本框后面（在同一行中）创建一个div？

        <!--Text box -->
        Title: <input type="text" name="textbox1" placeholder="Type here"
            class="inputs" />
        <!-- dropdown menu -->
        <div class="select-style">
            <select class="dropdown" Name="color" onchange="">
                <option value="" class="label" value="">Text Color</option>
                <option value="black">Black</option>
                <option value="blue">Blue</option>
                <option value="green">Green</option>
                <option value="red">Red</option>
            </select>
        </div>

Answer 1

只需将此规则添加到您的css文件中：

.select-style{
    display: inline;
}

这是jsfiddle

或者如果您希望使用内联样式，请将其添加到div：

 <div style="display: inline" class="select-style">

Answer 2

    Title: <input type="text" name="textbox1" placeholder="Type here"
        class="inputs" />

    <!-- dropdown menu -->
    <span class="select-style">
        <select class="dropdown" Name="color" onchange="">
            <option value="" class="label" value="">Text Color</option>
            <option value="black">Black</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>
    </span>

为我工作

Answer 3

使用CSS：

.select-style {display:inline-block;}

希望这有帮助！

Answer 4

您应该使用 span ，因为它是内联元素。 div 是块元素，它总是会破坏行。

见JFiddle： http://jsfiddle.net/VC7DD/

<!--Text box -->
Title: <input type="text" name="textbox1" placeholder="Type here"
    class="inputs" />
<!-- dropdown menu -->
<span class="select-style">
    <select class="dropdown" Name="color" onchange="">
        <option value="" class="label" value="">Text Color</option>
        <option value="black">Black</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="red">Red</option>
    </select>
</span>

如何在文本框后面创建一个div？

4 个答案: