如何仅在需要时添加分离？

Question

如何在更改容器宽度时在与新行内联显示的列表元素之间添加分隔？

例如：

<ul>
    <li>aaaaaa</li>
    <li>bbbbbb</li>
    <li>cccccc</li>
    <li>dddddd</li>
    <li>eeeeee</li>
</ul>

我想根据parent的可用宽度space得到上面的视图，'§'对应要添加的分隔符和'|' parent 的边框：

|  aaaaaa § bbbbbb § cccccc § dddddd § eeeeee  |

或

|  aaaaaa § bbbbbb § cccccc § dddddd  |
|               eeeeeee               |

或

|  aaaaaa § bbbbbb § cccccc  |
|      dddddd § eeeeee       |

或

|  aaaaaa § bbbbbb  |
|  cccccc § dddddd  |
|      eeeeeee      |

或

|  aaaaaa  |
|  bbbbbb  |
|  cccccc  |
|  dddddd  |
|  eeeeee  |

由于 Paulie_D 回答说如果我需要将列表居中，它必须经过 JavaScript，我通过在标签中添加 JS 重新开始这个问题。

我认为在 JS 中可能是这样的：

if (next_item exist AND next_item Y = current_item Y) then add the separation

Answer 1

也许这就是您要找的东西？

li {
  list-style: none;
}

li:before {
  content: '§ ';
}

<!doctype html>
<html>
  <body>



  <ul>
    <li>aaaaaa</li>
    <li>bbbbbb</li>
    <li>cccccc</li>
    <li>dddddd</li>
    <li>eeeeee</li>
</ul>

<//body>
</html>

Answer 2

通常你需要 javascript 但你可以破解一些负边距和 overflow:hidden.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  list-style: none;
  width: 30%;
  border: 1px solid grey;
  overflow: hidden;
}

li {
  display: inline-block;
  padding: 0 1em;
}

li:before {
  content: "§";
  margin: 0 0 0 -2em;
  display: inline-block;
}

<ul>
  <li>aaaaaa</li>
  <li>bbbbbb</li>
  <li>cccccc</li>
  <li>dddddd</li>
  <li>eeeeee</li>
</ul>

Answer 3

好吧，我终于在 jquery 中做了一些事情，只要列表元素之间的边距在有或没有占用的情况下都相同，它似乎就可以工作。

https://codepen.io/steveoriol/pen/gBvLZB

$('.menu > li').bind('setseparation',function() {
    var nextitem = $(this).next('li');
    if (
      nextitem.length > 0 && 
      $(this).position().top == nextitem.position().top
      ) 
    {
      //console.log( $(this).position().top + ' == ' + nextitem.position().top);
      $(this).addClass( "separation" );
    }
    else $(this).removeClass( "separation" );
});

$( window ).resize(function() {
  $('.menu > li').trigger('setseparation');
});

* {

  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  list-style: none;
  width: 15%;
  border: 1px solid grey;
  text-align: center;
}

li {
  display: inline-block;
  margin: 0 .5em;
  position: relative;
}

li.separation:after {
  content: "§";
  position: absolute;
  right: -0.8em;
}

<ul class="menu">
  <li>aaaaaa</li>
  <li>bbbbbb</li>
  <li>cccccc</li>
  <li>dddddd</li>
  <li>eeeeee</li>
</ul>

如何仅在需要时添加分离？

How add separation only when needed?

html

javascript

css

dom

inline