CSS對齊3個項目一個接一個

我需要對齊下面給出的三個元素作爲水平而不是垂直...這是當前文件...我該怎麼做？CSS對齊3個項目一個接一個

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

enter image description here

來源

2013-02-24 user1050619

在解決你的問題之前....看起來你的代碼中有一個重複的元素ID。（「去尋找」） – Fico 2013-02-24 17:01:17

讓你在一條線上需要的產品：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-24 15:06:16

<style> 
.IE-banner 
{ 
float:right; 
background-color:red; 
} 
</style>

來源

2013-02-24 15:10:59 catherine

您可以通過改變元素的顯示屬性做到這一點。這也可以讓你避免在代碼中過多的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-24 15:17:03 deau

我告訴你在這裏2層的替代品試圖保持符合您的標記設計 enter image description here

細節在你的意志來管理。

我修改了IDS的一個，以避免在您的標記重複的ID（新的ID命名「去面對」）

<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」由所有div的嵌套在IE橫幅共享類，並添加一條規則針對這一類，這將漂浮的div併爲他們的第三套可用寬度

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

實例可以在這個fiddle

替代如果你不想一類添加到嵌套的div可以按如下修改選擇，將工作以及

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

}

可以看出

來源

2013-02-24 17:55:02 Fico

CSS對齊3個項目一個接一個

回答

相關問題