我正在尝试在一行中显示此内容,以便在我的页面左侧显示Shopping,并在右侧的“right”div中显示内容。我试过将div浮动到右边但是没有用。
非常感谢任何帮助。
<header>
<h1>Shopping</h1>
<div id="cart"
<a href="#"><img src="images/cart.png" width="80" height="80"></a>
<p> Cart: 0 </p>
<a href="#">Login</a>
</div>
</header>
答案 0 :(得分:0)
<h1>
和<div>
是block
元素,因此它们各占一行。您必须按照以下方式将它们显示在一行中。
header h1, header #cart {
display:inline-block;
}
那么还有一些方法可以在一行中显示它们,但这是最简单的。
答案 1 :(得分:0)
试试这个https://jsfiddle.net/g6camng3/1/
HTML
<header>
<h1>Shopping</h1>
<div id="right">
<a href="#"><img src="http://placehold.it/350x150" width="80" height="80"></a>
<p> Cart: 0 </p>
<a href="#">Login</a>
</div>
CSS
h1 {
float: left;
display: inline-block;
}
#right {
display: inline-block;
}
答案 2 :(得分:0)
我建议您使用span
代替p
代码:
<header>
<h1>Shopping</h1>
<div id="cart"
<span><a href="#"><img src="images/cart.png" width="80" height="80"></a></span><span> Cart: 0 </span><span><a href="#">Login</a></span>
</div>
</header>