如何讓無序列表向右浮動？

我在使用我網站的產品頁面工具欄上的一個小功能時遇到問題。我想讓它浮動到我的網站的麪包屑導航的右側，使其與麪包屑導航內聯。但它會進入下一行。如何讓無序列表向右浮動？

這裏是什麼樣子：

<div id="breadcrumbsForStore"> 
<h5> 

<a href="/" title="store home">Home</a> 
{% for category in product.categories limit:1 %}/{{ category | link_to }}{% endfor %}/
<a href="{{ page.full_url }}" title="{{ page.name }}">{{ page.name }}</a> 
</h5> 
<ul id="shoptools"><li>SIZE GUIDE/Filter:</li></ul> 
</div>

而這裏的CSS：

#breadcrumbsForStore{width:960px; font-family: futura; text-align:left;margin:20px 0px 25px 0;padding:0px 0 5px 0;clear:both; margin-left: auto; margin-right: auto; text-transform:uppercase;} 
#breadcrumbsForStore h5{font-size:10px; font-family: futura;} 
#breadcrumbsForStore h5 a{color:#525252; border-bottom:0px dotted #0d0d0d; letter-spacing:1px; padding: 10px 3px 10px 3px;} 
#breadcrumbsForStore h5 a:hover{color: #0d0d0d;} 
ul#shoptools{float:right; display:inline;} 
ul#shoptools li{float:left; display:inline;}

這裏的問題出在哪裏（它說：「SIZE GUIDE/FILTER：」） http://shopmoonfall.bigcartel.com/products

來源

2014-02-18 user3196375

把'UL＃shoptools'爲＃breadcrumbsForStore'元素'的第一個孩子，鏈接之前。不要忘記清除'＃breadcrumbsForStore'結尾處的* float *。 –

更改您的HTML這樣的：

<div id="breadcrumbsForStore"> 
<ul id="shoptools"><li>SIZE GUIDE/Filter:</li></ul> 
<h5> 
<a href="/" title="store home">Home</a> 
{% for category in product.categories limit:1 %}/{{ category | link_to }}{% endfor %}/
<a href="{{ page.full_url }}" title="{{ page.name }}">{{ page.name }}</a> 
</h5> 
</div>

來源

2014-02-18 00:49:13 shenku

出於某種原因，它漂浮在右邊，但它仍然比麪包屑低一點。無論如何要修復它除了負邊緣？ – user3196375

根據下面的@Mike註釋，h5 {display：inline-block} – shenku

H5元素默認顯示：塊樣式。如果你添加一個樣式，使其內聯，如

h5 {display: inline-block}

然後浮動元素將顯示在它旁邊。

小提琴這裏： http://jsfiddle.net/t84yU/

（注意，我改變了你的寬度從960像素到560像素也只是爲了使其更具可讀性）

來源

2014-02-18 00:44:57 Mike

我不是你的努力100％清晰但是你嵌套<h5>的方式有點兒醜陋。

如果您希望<ul>與<a>標籤在同一行，您應該在<h5>標籤中包含<ul>。

如果您不想在<h5>中包含<ul>，請確保<h5>也是display: inline;。「行」上的所有元素必須是display: inline/inline-block;才能顯示在同一行上。頭默認爲display: block;，所以<h5>正在按下無序列表。

來源

2014-02-18 00:48:07 lordflapjack

如何讓無序列表向右浮動？

回答

相關問題