html - CSS 将 3 个元素一一对齐

Question

我需要将下面给出的三个元素水平而不是垂直对齐...这是当前文件...我该怎么做？

HTML:

    <div id="banner">
        <div class="IE-banner">
            <div id="go-lang">
                <p> This will contain google language </p>
            </div>
            <div id="go-search">
                <p> This will contain google search </p>
            </div>
            <div id="go-search">
                <p> This will contain facebook links </p>
            </div>
        </div>
    </div>

CSS:

#banner{ 
 width:900px; 
 height:75px; 
 background-color:Red; 
 color:White; 
 font-size:10px; 
 font-weight:bold; 
 position:relative; 
}

div.IE-banner{
    position:absolute;
    vertical-align:middle;
    top:20px;
    right:10px;
    font-size:medium;
}

Answer 1

将你想要的元素排成一行:display:inline-block

.IE-banner div {
    display: inline-block;
}

---

不过，为了更有条理，我会为您想要内联的所有元素添加一个类。并且只修改那个类。

<div id="banner">
    <div class="IE-banner">
        <div id="go-lang" class="inline">
            <p> This will contain google language </p>
        </div>
        <div id="go-search" class="inline">
            <p> This will contain google search </p>
        </div>
        <div id="go-search" class="inline">
            <p> This will contain facebook links </p>
        </div>
    </div>
</div>

CSS:

.inline {
    display:inline-block;
}