Question

我有以下HTML和CSS（最小化版本）：

<html>

<head>
    <style type="text/css">

footer ul li {
  float:left;
  list-style:none;
  color:#aaa;
  font-size:15px;
}

footer div li {
  float:left;
  list-style:none;
  color:#aaa;
  font-size:15px;
}

footer ul li:after {
  content:"|";
  margin:0 3px 0 3px;
}

footer div li :after{
  content:"|";
  margin:0 3px 0 3px;
}
    </style>
</head>




<body>

<footer>
  <div>
    <li>############ College, #### Street, ############, ### ###</li>
    <li>Switchboard: ###### ######</li>
  </div>

  <br>

  <ul>  
    <li>&copy; Copyright ##### ###### 2015</li>
    <li><a href="<?php echo site_url('/terms-conditions') ?>">Terms &amp; Conditions</a></li>
    <li><a href="<?php echo site_url('/privacy-policy') ?>">Privacy Policy</a></li>
  </ul>
</footer>

</body>
</html>

我的问题是，＆＃39; |＆＃39;没有在＆＃39; div＆＃39;之后显示，但是在＆＃39; ul＆＃39;之后显示。

我尝试了很多不同的选项并搜索了几个小时但却找不到我做错了什么？

Answer 1

这是不正确的，您在:after

之前没有空格

footer div li :after{

此处您还缺少<ul>标记。列表项必须具有UL，DL或OL父级（在本例中为UL）。

<footer>
  <div>
    <ul> <!-- add this-->
      <li></li>
    </ul>
  </div>
</footer>

JSFiddle

Answer 2

您需要替换

<div>
    <li>############ College, #### Street, ############, ### ###</li>
    <li>Switchboard: ###### ######</li>
</div>

与

<div>
  <ul>
    <li>############ College, #### Street, ############, ### ###</li>
    <li>Switchboard: ###### ######</li>
  </ul>  
</div>

Answer 3

 <div>
    <li>############ College, #### Street, ############, ### ###</li>
    <li>Switchboard: ###### ######</li>
  </div>

在您的代码的此HTML部分，您使用的是<li>元素，但甚至没有定义<ul> 如果你定义它应该做的伎俩：

 <div>
   <ul>
    <li>############ College, #### Street, ############, ### ###</li>
     <li>Switchboard: ###### ######</li>
  </ul>
</div>

Answer 4

中存在间距问题

first div li :first
{}

应该是

first div li:first
{}

Answer 5

FIDDLE试试这个......

footer div li:last-child:after{
content:"|";
}

Answer 6

div li之后的空间：应该是footer div li：after。这使得＆＃34; |＆＃34;出现。

在div之后不显示HTML

6 个答案: