0

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

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

在此处输入图像描述

4

4 回答 4

0

我在这里向您展示 2 种尝试与您的标记设计保持一致的替代方案 在此处输入图像描述

细节由您来管理。

我修改了其中一个 id 以避免标记中出现重复的 id（新 id 名为"go-face"）

<div id="go-face" class= "goDiv">
                <p> This will contain facebook links </p>
  </div>

我修改了您的 IE 横幅规则，以使您的文本垂直居中并摆脱额外的代码

div.IE-banner{
   text-align:center;
   line-height:75px;   
   font-size:medium;
}

我将“goDiv”命名为嵌套在 IE 横幅中的所有 div 共享的类，并添加了一个针对该类的规则，该规则将浮动 div 并为它们设置可用宽度的三分之一

.goDiv {
    width:33.33%;
    float:left;
}

可以在this fiddle看到示例

替代方案 如果您不想将类添加到嵌套 div 中，您可以按如下方式修改选择器并且也可以使用

.IE-banner div{
   width:33.33%;
    float:left; 

}
于 2013-02-24T17:55:02.213 回答
0 
<style>
.IE-banner
{
float:right;
background-color:red;
}
</style>
于 2013-02-24T15:10:59.840 回答
0

将您想要的项目排成一行：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;
}
于 2013-02-24T15:06:16.790 回答
0

您可以通过更改元素的显示属性来做到这一点。这也可以让您避免代码中出现过多的 div：

<ul class="banner">
    <li>Google lang</li>
    <li>Google search</li>
    <li>Facebook</li>
</ul>

使用 CSS 规则：

ul.banner       { display: block; }
ul.banner > li  { display: inline-block; }

或使用浮动方法：

ul.banner       { display: block; overflow: auto; }
ul.banner > li  { float: left; }

漂亮干净的 HTML 内容适用于各种媒体。

于 2013-02-24T15:17:03.853 回答