居中菜單，其中一些項目可能會消失

我在做什麼： 我想中心一些文本（區域名稱）。本文將有3種不同的配置：居中菜單，其中一些項目可能會消失

文字和浮動右箭頭
浮動左箭頭文字和浮動右箭頭
浮動左箭頭和文字

這些箭頭轉到下一個區域或先前區域，如果沒有下一個或上一個區域箭頭消失，但文本仍顯示當前區域名稱。

問題： 本文只是當一個箭頭消失或出現在其中心移到了實現這一點，所有這些都失敗了相應

我已經嘗試了許多不同的方式不會保持居中，這似乎是一個足夠簡單的問題，但我無法弄清楚。

下面是一些測試我的jsfiddle嘗試： 鏈接：http://jsfiddle.net/5vTE5/

<ul style="text-align: center; list-style:none;"> 
    <li style="float:left; display:inline"> 
     Left float 
    </li> 
     <li style="display:inline;"> 
     Centered 
    </li> 
     <li style="float:right; display:inline"> 
     Right 
    </li> 
</ul> 
<br/> 

<div style="text-align: center;"> 
<span style="float: left;">Left text</span> 
<span style="text-align: center;">Centered Text</span> 
<span style="float: right;">Right Text</span> 
</div> 
<!--Right is gone--> 
<div style="text-align: center;"> 
<span style="float: left;">Left text</span> 
<span style="text-align: center;">Centered Text</span> 
</div> 

<!--left is gone--> 

<div style="text-align: center;"> 
<span style="text-align: center;">Centered Text</span> 
<span style="float: right;">Right Text</span> 
</div> 

<br/> 
<!--This text is centered to the size of the window, or its parent--> 
<div style="text-align: center;">Centered Text</div>

圖片： Floating left arrow and text Floating left arrow text and floating right arrow Text and a floating right arrow

的圖像很窄，所以我還上傳了他們努力讓它們更加明顯： http://imgur.com/a/WsC7V

目前我正在做它作爲一個列表。

感謝，

凱文

來源

2014-07-11 Kevin

能否請您提供的小提琴？謝謝。 –

您可以將結構保留在不顯示右側，左側元素的頁面中。例如http://jsfiddle.net/CtKgr/2/ CSS

li 
{ 
    width:33%; 
    border:1px solid red; 
    list-style-type: none; 
    display:inline-block; 
    width:33%; 
    float:left; 
    height:50px; 
    line-height:50px; 
} 

.center 
{ 
    text-align:center; 
} 

.right 
{ 
    text-align:right; 
}

HTML

<ul> 
    <li> 
     Left 
    </li> 
    <li class="center"> 
     Centered 
    </li> 
    <li class="right"> 
     Right 
    </li> 
</ul> 

<ul> 
    <li> 
    </li> 
    <li class="center"> 
     Centered 
    </li> 
    <li class="right"> 
     Right 
    </li> 
</ul> 


<ul> 
    <li> 
     Left float 
    </li> 
    <li class="center"> 
     Centered 
    </li> 
    <li class="right"> 

    </li> 
</ul>

來源

2014-07-11 15:01:48 jtorrescr

現在我想到了，我想我也可以使用一張表。 *臉部撞擊臺* – Kevin

你沒有正確使用float。這是一個常見的誤解，也是我在學習float時與其他CSS屬性結合學習時最難學的東西之一。

Float,as described by W3Schools，告訴內聯元素儘可能向左或向右移動。所以，如果你願意，你可以漂浮一些物品和一些物品，但是這意味着每件物品會盡可能地向左或向右移動。

除此之外，float實際上並不能很好地與內聯列表搭配使用。相反，請按照this SO example並完全移除浮動。如果您希望每個項目向左或向右浮動，則應考慮爲每個內聯列表項目設置靜態寬度，並在適當的位置分配text-align: left，text-align: center和text-align:right。

來源

2014-07-11 14:53:34 smcjones

居中菜單，其中一些項目可能會消失

回答

相關問題