使用span对齐html中的元素时出现问题

我有以下资料：

<div id = "top">

    <div id="search_top"> 
        <span> Search: </span>
        <span> <form id= "search"> <input class = "search_textbox" type="text" name="ticker" value="" ></form> </span>
        <div class="arrow-right block"> </div>
    </div> 

</div>

我想要的是“搜索”，然后是表单，然后是“向右箭头”。然而，这一切都是相互叠加的，我不知道为什么

---

谢谢

您的html代码中有一些问题，一个未关闭的

输入

，一个

表单

在

span

标记中，等等。如果您解决了这些问题，您将得到如下结果：

<div id="top">
    <div id="search_top">
        <span> Search: </span>
        <form id="search">
            <input class="search_textbox" type="text" name="ticker" value="" />
        </form>
        <div class="arrow-right block"></div>
    </div>
</div>

---

请参阅演示。

您将希望浮动

#search

的子对象，例如

#search>*{float:left；}

，例如？@Jeroen，这很有效，但有一部分效果。。它们不是垂直对齐的，垂直对齐：中间似乎不起作用……如果你可以重新排序HTML，你可以这样做

<div id="top">
    <div id="search_top">
        <span> Search: </span>
        <form id="search">
            <input class="search_textbox" type="text" name="ticker" value="" />
        </form>
        <div class="arrow-right block"></div>
    </div>
</div>

#top {
    display:inline-block;
}

#search_top > * {
    display: inline-block;
    vertical-align: middle;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 0.6em solid transparent;
    border-bottom: 0.6em solid transparent;
    vertical-align:text-top;
    border-left: 0.6em solid green;
    cursor: pointer;
}