Question

我正在尝试在一行中显示此内容，以便在我的页面左侧显示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>

Like this

Answer 1

<h1>和<div>是block元素，因此它们各占一行。您必须按照以下方式将它们显示在一行中。

header h1, header #cart {
    display:inline-block;
}

那么还有一些方法可以在一行中显示它们，但这是最简单的。

Answer 2

试试这个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;
}

Answer 3

我建议您使用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>

如何在一行中显示此内容？

3 个答案: