Question

我有一个带有display: inline-block的HTML列表，我希望用一行来分隔以创建页脚菜单。为此，我为之前有项目的每个列表项应用左边框。但是，当屏幕较小且换行时，第二行中的第一项显示边框。

一旦换行，如何隐藏第二行第一个项目的边框？

这是一个小提琴：https://jsfiddle.net/ur7dyL7u/3/

<style type="text/css">
li {
    line-height: 24px;
    display: inline-block;
    border-right: none;
}

li~li {
    border-left: red 2px solid;
    padding-left: 5px;
}

div{
       text-align:center;
}

</style>
<div>
<ul>
    <li>Item nr 1</li>
    <li>Item nr 2</li>
    <li>Item nr 3</li>
    <li>Item nr 4</li>
    <li>Item nr 5</li>
    <li>Item nr 6</li>
    <li>Item nr 7</li>
    <li>Item nr 8</li>
    <li>Item nr 9</li>
    <li>Item nr 10</li>
</ul>
<div>

Answer 1

我认为没有办法以你想要的方式做到这一点，你将不得不改变方法;

我尝试了这些样式来实现你想要的东西：

ul{
  padding:0; overflow:hidden;
}
li {
    line-height: 24px;
    display: inline-block;
    border-right: none;
    padding-left: 5px;
}
li~li {
    box-shadow: -2px 0px 0px red;
}

而不是边框，我使用框外的框阴影并将隐藏的溢出设置为列表，因此它将始终隐藏每行上第一个元素的阴影。

以下是一个工作示例：https://jsfiddle.net/2o18jkfL/

另一个＆＃34;工作＆＃34; with text-align：center

http://codepen.io/sergio0983/pen/YpKxzQ

修改

使用不同方法：在覆盖每行第一项上的行之前：

http://codepen.io/sergio0983/pen/eBOEpY

Answer 2

如果您在换行时在第一行中分离没有问题，则可以执行此操作：

而不是border-left使用border-right在所有li元素中使用ul { text-align: center; } li { line-height: 14px; display: inline-block; } li:not(:last-child) { border-right: red 1px solid; padding-right: 10px; }，而不是最后一个元素。

＆＃13;

<ul>
  <li>Item nr 1</li>
  <li>Item nr 2</li>
  <li>Item nr 3</li>
  <li>Item nr 4</li>
  <li>Item nr 5</li>
  <li>Item nr 6</li>
  <li>Item nr 7</li>
  <li>Item nr 8</li>
  <li>Item nr 9</li>
  <li>Item nr 10</li>
</ul>

＆＃13;

java

＆＃13;

换行时改变风格

2 个答案: