如何使带有伪元素的 ul 列表项保留在无序列表中？

Question

我有一个无序列表，其中包含样式为标签的项目列表。 See jsFiddle。但是当标签分成两行时，标签的箭头会溢出 ul 的左侧。我怎样才能避免这种情况？

.searchtags {
  padding: 0;
  margin: 15px 0 5px 0;
  list-style-type: none;
  font-family: arial;
  border: 1px solid red;
  width:300px;
}

.searchtags li:not(.filterheader) {
  position: relative;
  white-space: nowrap;
  float: left;
  width: auto;
  height: 26px;
  font-size: 12px;
  margin: 5px 15px 0 0;
  padding: 3px 6px 3px 15px;
  background: #fff;
  color: #4a4949;
  border-radius: 2px;
  border: 1px solid #cacaca;
}

.searchtags li:not(.filterheader):before,
.searchtags li:not(.filterheader):after {
  position: absolute;
  content: '';
}

.searchtags li:not(.filterheader):before {
  /* the circle on the left */
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #aaa;
  left: 2px;

<ul class="searchtags clearfix">
  <li class="filterheader">
    <strong>Tags:</strong></li>
  <li><a href="#">Tag</a><span aria-hidden="true" class="right" title="Delete">×</span></li>
  <li><a href="#">Long tag</a><span aria-hidden="true" class="right" title="Delete">×</span></li>
  <li><a href="#">Tag</a><span aria-hidden="true" class="right" title="Delete">×</span></li>
  <li><a href="#">Tag</a><span aria-hidden="true" class="right" title="Delete">×</span></li>
  <li><a href="#">Long tag</a><span aria-hidden="true" class="right" title="Delete">×</span></li>
</ul>

提前感谢您的帮助。

Answer 1

添加足够的边距，使伪元素包裹在元素边界内：

.searchtags li:not(.filterheader) {
    margin-left: 12px;
}

Answer 2

您可以通过将 padding-left 添加到 .searchtags 然后为 .filterheader 添加负边距来实现，这样只有第二行会受到影响。就像缩进一个段落。

.searchtags {
  padding: 0;
  margin: 15px 0 5px 0px;
  list-style-type: none;
  font-family: arial;
  border: 1px solid red;
  width:300px;
  padding-left:15px;
}

.searchtags li:not(.filterheader) {
  position: relative;
  white-space: nowrap;
  float: left;
  width: auto;
  height: 26px;
  font-size: 12px;
  margin: 5px 15px 0 0;
  padding: 3px 6px 3px 15px;
  background: #fff;
  color: #4a4949;
  border-radius: 2px;
  border: 1px solid #cacaca;
}

.searchtags li:not(.filterheader):before,
.searchtags li:not(.filterheader):after {
  position: absolute;
  content: '';
}

.searchtags li:not(.filterheader):before {
  /* the circle on the left */
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #aaa;
  left: 2px;
  top: 9px;
  z-index: 2;
}

.searchtags li:not(.clearfilters):not(.filterheader):after {
  /* the arrow on left side positioned using left property */
  height: 18px;
  width: 18px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #fff;
  border-color: transparent transparent #cacaca #cacaca;
  border-width: 1px;
  border-style: solid;
  left: -9px;
  top: 3px;
}

.searchtags li:not(.clearfilters):not(.filterheader) a,
.searchtags li:not(.clearfilters):not(.filterheader) a:hover {
  color: #4a4949;
  font-weight: normal;
}

.searchtags li:not(.clearfilters):not(.filterheader) .right {
  /* the x mark at the right */
  text-align: right;
  margin: 0px 2px 0 4px;
  font-size: 15px;
  cursor: pointer;
}

.searchtags .filterheader {
  float: left;
  margin-right: 15px;
  padding-left:-15px;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

* {
  box-sizing: border-box;
}

<ul class="searchtags clearfix">
  <li class="filterheader">
    <strong>Tags:</strong></li>
  <li><a href="#">Tag</a><span aria-hidden="true" class="right" title="Delete">×</span></li>
  <li><a href="#">Long tag</a><span aria-hidden="true" class="right" title="Delete">×</span></li>
  <li><a href="#">Tag</a><span aria-hidden="true" class="right" title="Delete">×</span></li>
  <li><a href="#">Tag</a><span aria-hidden="true" class="right" title="Delete">×</span></li>
  <li><a href="#">Long tag</a><span aria-hidden="true" class="right" title="Delete">×</span></li>
</ul>

Answer 3

您正在使用 position:absolute，因此这些箭头不会与 position:relative 定位元素之外的任何内容交互。
第一行没有这个问题，因为第一个 <li> 有一个非零的 margin-right。所以只需添加 margin-left.
如果您希望它看起来完全相同但行的第一行不溢出，请将 <li> 设置为 margin-right: 0; margin-left: whatever。同时设置.filterheader {margin-right:0}。

Answer 4

向 .searchtags、
已将 <ul> 更改为 <dl>、
已将 .filterheader 更改为 <dt>、
并将 <li> 更改为 <dd>。有了这些更改，就不再需要 :not(.filterheader)。
所有<dd>和<dt>都是display:inline-block

片段

.searchtags {
  /* Changed */
  padding: 0 0 5px 20px;
  margin: 15px 0 5px 0;
  list-style-type: none;
  font-family: arial;
  border: 1px solid red;
  width: 300px;
}
dt.filterheader {
  /* float:left removed */
  /* Added */
  display: inline-block;
  margin-right: 15px;
  position: relative;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
* {
  box-sizing: border-box;
}
dd {
  position: relative;
  white-space: nowrap;
  height: 26px;
  font-size: 12px;
  margin: 5px 15px 0 0;
  padding: 3px 6px 3px 15px;
  background: #fff;
  color: #4a4949;
  border-radius: 2px;
  border: 1px solid #cacaca;
  /* Added */
  display: inline-block;
}
dd:before,
dd:after {
  position: absolute;
  content: '';
}
dd:before {
  /* the circle on the left */
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #aaa;
  left: 2px;
  top: 9px;
  z-index: 2;
}
dd:after {
  /* the arrow on left side positioned using left property */
  height: 18px;
  width: 18px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #fff;
  border-color: transparent transparent #cacaca #cacaca;
  border-width: 1px;
  border-style: solid;
  left: -9px;
  top: 3px;
}
dd a,
dd a:hover {
  color: #4a4949;
  font-weight: normal;
}
dd.right {
  /* the x mark at the right */
  text-align: right;
  margin: 0px 2px 0 4px;
  font-size: 15px;
  cursor: pointer;
}

<dl class="searchtags clearfix">
  <dt class="filterheader">
    <strong>Tags:</strong></dt>
  <dd><a href="#">Tag</a><span aria-hidden="true" class="right" title="Delete">×</span>
  </dd>
  <dd><a href="#">Long tag</a><span aria-hidden="true" class="right" title="Delete">×</span>
  </dd>
  <dd><a href="#">Tag</a><span aria-hidden="true" class="right" title="Delete">×</span>
  </dd>
  <dd><a href="#">Tag</a><span aria-hidden="true" class="right" title="Delete">×</span>
  </dd>
  <dd><a href="#">Long tag</a><span aria-hidden="true" class="right" title="Delete">×</span>
  </dd>
</dl>

如何使带有伪元素的 ul 列表项保留在无序列表中？

How to make ul list items with pseudo elements stay inside the unordered list?

html

css

pseudo-element

片段