Question

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

例如：

        <tbody class="invoice_tbody">
            <tr t-foreach="o.invoice_line_ids" t-as="l">
                <td><span t-field="l.product_id.name"/></td>
                <t t-esc="', '.join(['%s: %s' % (attribute_value.attribute_id.name, attribute_value.name) for attribute_value in l.product_id.attribute_value_ids])"/>
                <td class="hidden"><span t-field="l.origin"/></td>

我想根据父级的可用宽度空间获得上面的视图，“§”对应于要添加的分隔符，“ |”父母的边界：

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

或

|  aaaaaa § bbbbbb § cccccc § dddddd § eeeeee  |

或

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

或

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

或

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

Paulie_D回答说，如果我需要将列表居中，则必须使用JavaScript，因此我通过在标签中添加JS重新开始问题。

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

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

Answer 1

通常，您需要使用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 2

好吧，只要列表元素之间的边距在没有扣押的情况下是相同的，我终于在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>

Answer 3

也许这就是您想要的？

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>

如何仅在需要时添加分隔符？

3 个答案: