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

时间：2016-12-06 09:57:40

标签： html css pseudo-element

我有一个无序列表，其中列出了作为标签设置的项目。 See jsFiddle。但是当标签分成两行时，标签的箭头会溢出Animal.select(:animal_name).where("animal_name like lower(?)","%cat%").order("case when lower(animal_name) like lower('cat%') then 0 else 1 end ASC, lower(animal_name) ASC") 的左侧。我怎么能避免这个？

＆＃13;
＆＃13; 
ul
＆＃13; 
.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;
＆＃13;
＆＃13;
＆＃13;

提前感谢您的帮助。

4 个答案:

答案 0 :(得分：1)

添加足够的边距，以便psuedo元素包含在元素边界内：

margin-left 

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

答案 1 :(得分：0)

您可以通过向padding-left添加.searchtags然后为.filterheader添加负余量来实现这一目标，这样只会影响第2行。它就像缩进一个段落。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

答案 3 :(得分：0)

  • 将填充添加到.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>

相关问题
最新问题