代码之家  ›  专栏  ›  技术社区  ›  XåpplI'-I0llwlg'I -

如何显示旁边有内联元素、下面有p元素的h1元素?

  •  0
  • XåpplI'-I0llwlg'I -  · 技术社区  · 12 年前

    我问 a question 前面介绍了将编辑/删除链接与h1元素内联的最佳方式。我能够通过给出的答案实现这一点,但我现在有了额外的要求,需要在h1下面显示一段并编辑/删除链接。

    到目前为止,我的HTML是这样的:

    <div class="product-header">
      <div class="title">
        <h1>Product 1</h1>
      </div>
      <div class="admin">
          (<a href="#">Edit</a> | <a href="#">Delete</a>)
      </div>
      <p class="description">Product 1 is a cool product</p>
    </div>
    

    我希望它看起来如下:

    产品1 (编辑|删除)
    产品1是很酷的产品

    …页面其余内容

    但我不确定用什么CSS来实现这一点!我所做的一切似乎都把描述段落和标题放在同一行,就像这样:

    产品1 (编辑|删除) 产品1是很酷的产品

    …页面其余内容

    Link to JSFiddle

    3 回复  |  直到 8 年前
        1
  •  2
  •   Ahsan Khurshid    12 年前

    无需添加 clear:both 在里面 .产品标题 类,但您确实需要添加 清除:两者 在里面 .产品标题.说明 类如下所示:

    .product-header .description {
        clear:both;
    }​
    

    DEMO

    附加说明:

    这个 clear CSS属性指定一个元素是可以位于其前面的浮动元素旁边,还是必须向下移动(清除)。

        2
  •  1
  •   Michael Peterson    12 年前

    你只需要添加 clear:both .description 以下为:

    http://jsfiddle.net/kDQLZ/3/

        3
  •  1
  •   Rohit Azad Malik    12 年前

    Jsfiddle Demo

    嗨,现在清空你的 p标记类 clear left

    像这样

    .product-header .description {
     clear:left;   
    }
    

    Demo