Question

我有以下内容：

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

我的CSS是：

#top{
    display:inline-block;
}

#search{
    float:left;
}


.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;
}

我想要的是“搜索”然后是表格，然后是“向右箭头”。然而，这一切都在彼此之上，我不知道为什么......

谢谢！

Answer 1

你的html代码中有一些问题，一个未公开的input，一个form 里面一个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>

以下CSS将实现您想要的对齐：

#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;
}

请参阅this jsfiddle了解演示。

麻烦使用span在html中对齐元素

1 个答案: