CSS to line break before/after a particular `inline-block` item

后端 未结 9 1434
再見小時候
再見小時候 2020-11-27 09:36

Let\'s say I have this HTML:

Features

  • Smells Good
  • <
相关标签:
9条回答
  • 2020-11-27 10:30

    You are not interested in a lot of "solutions" to your problem. I do not think there really is a good way to do what you want to do. Anything you insert using :after and content has exactly the same syntactic and semantic validity it would have done if you had just written it in there yourself.

    The tools CSS provide work. You should just float the lis and then clear: left when you want to start a new line, as you have mentioned:

    See an example: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

    0 讨论(0)
  • 2020-11-27 10:30

    I accomplished this by creating a ::before selector for the first inline element in the row, and making that selector a block with a top or bottom margin to separate rows a little bit.

    .1st_item::before
    {
      content:"";
      display:block;
      margin-top: 5px;
    }
    
    .1st_item
    {
      color:orange;
      font-weight: bold;
      margin-right: 1em;
    }
    
    .2nd_item
    {
      color: blue;
    }
    
    0 讨论(0)
  • 2020-11-27 10:31

    Note sure this will work, depending how you render the page. But how about just starting a new unordered list?

    i.e.

    <ul>
    <li>
    <li>
    <li>
    </ul>
    <!-- start a new ul to line break it -->
    <ul>

    0 讨论(0)
提交回复
热议问题