我有跨度我想浮動和居中的元素。 我需要跨度浮動，因此當屏幕寬度小於跨度寬度時它們不會消失。如果浮動，他們將跳轉到下一行，因爲屏幕縮小了。我想我可以使用3浮動中心divs，但我想知道是否有一個簡單的方法來做到這一點，並沒有設置任何固定的寬度。具有浮動屬性的中心跨度元素

申請display:inline-block跨度將無法正常工作。 text-align: center是繼承的。

HTML

<div style="text-align: center; margin-bottom: 20px;"> 
    <div style="float:left;"> 
     <span style="float:left">FOO</span><span style="float:left">BAR</span> 
    </div> 
</div>

編輯：一個的jsfiddle解釋它：https://jsfiddle.net/5yyhdpf1/

來源

2016-07-02 Tiago

我只想讓浮動的跨度在中心並排保持一行。因爲當屏幕寬度小於它們的寬度時，「float」會根據需要將跨度轉到下一行。 – Tiago

span元素是內聯默認情況下，添加text-align: center母公司是你所需要的，你爲什麼要複雜化呢？花車的要點是什麼？

<div style="text-align: center; margin-bottom: 20px;"> 
 
    <span>FOO</span><span>BAR</span> 
 
</div>

還有爲中心的浮動沒有這樣的事，而是你必須使用margin: auto居中塊級元素。

來源

2016-07-02 11:08:01 Aziz

當寬度小於跨度寬度時，浮動跨度將垂直對齊（轉至下一行）。請參閱EDIT問題 – Tiago

我找到了解決方案，我想要的行爲不是來自「浮動」，而是來自「行內塊」。由於「浮動」而不能正常工作。謝謝。 – Tiago

-1

嘗試此，嘗試此，

<!--html-part--> 
<div style="float:left"> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left"></span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left"></span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    </div> 
    <br> 
    <br> 
    <br> 
    <span>NONFLOATED</span> 
    <span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span>

/CSS-部分/ 跨度{寬度：300像素;文本對齊：中心; float：left;}

來源

2016-07-02 11:39:05

內嵌塊屬性設置爲所有跨度元素而沒有任何浮點數將表現如此。必須在父div上設置「text-align：center」。

<div style="text-align: center"> 
    <span style="display: inline-block">FOO</span><span style="display: inline-block">BAR</span> 
</div>

來源

2016-07-02 11:43:49 Tiago

具有浮動屬性的中心跨度元素

HTML

回答

相關問題