Question

我的网站产品页面'工具'栏上有一些小功能问题。我希望它浮动到我网站的痕迹导航的右侧，使其与面包屑导航内联。但它会进入下一行。

以下是它的样子：

<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

Answer 1

像这样更改你的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>

Answer 2

H5元素默认为显示：块样式。如果添加样式以使其内联，例如

 h5 {display: inline-block}

然后浮动元素会显示在它旁边。

这里小提琴： http://jsfiddle.net/t84yU/

（注意我的宽度也从960像素改为560像素，只是为了让它更具可读性）

Answer 3

我不是100％清楚你想要做什么，但你嵌套<h5>的方式有点难看。

如果您希望<ul>与<a>代码位于同一行，则应在<ul>代码中加入<h5>。

如果您不想在<ul>中加入<h5>，请确保<h5>也是display: inline;。 “行”上的所有元素必须为display: inline/inline-block;才能显示在一行上。默认情况下，标头为display: block;，因此<h5>正在按下无序列表。

如何将无序列表向右浮动？

3 个答案: