连续删除列表

Question

我试图连续摆脱一个项目符号，但由于某种原因，第一个消失了，但另一个没有。

我只希望电子邮件和电话并排，没有列表。

.get_in {
  list-style: none;
}

<div class="row">
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-envelope-o"></i>
        <p>[e-mail]</p>
      </li>
  </div>
  <div class="col-md-6">
    <li><i class="fa fa-phone"></i>
      <p>([phone]</p>
    </li>
    </ul>
  </div>
</div>

Answer 1

只是一些搞砸的 HTML。关闭第一个 ul，为第二个列表创建另一个并给出相同的类名。

.get_in {
    list-style: none;
}

<div class="row">
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-envelope-o"></i>
        <p>[e-mail]</p>
      </li>
    </ul>
  </div>
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-phone"></i>
        <p>([phone]</p>
      </li>
    </ul>
  </div>
</div>

Answer 2

您的 HTML 无效，您的浏览器正在尝试填补漏洞。如果您在浏览器的开发人员工具中检查实际呈现的 HTML，您很可能会看到：

<div class="row">
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-envelope-o"></i><p>[e-mail]</p></li>
    </ul>
  </div>  
  <div class="col-md-6">
    <li><i class="fa fa-phone"></i><p>([phone]</p></li>       
  </div>  
</div>

请注意，在第二列中，li没有用ul包装，这就是您的 CSS 规则不适用的原因。

我只想让电子邮件和电话并排，没有列表

如果是这种情况，则不要使用列表：

<div class="row">
  <div class="col-md-6">
    <i class="fa fa-envelope-o"></i> [e-mail]
  </div>
  <div class="col-md-6">
    <i class="fa fa-phone"></i> ([phone]
  </div>
</div>

Answer 3

首先，让我们把打开的ul标签放在第一个div标签下。其次，让我们把你的ul标签放在最后一个div和最后一个div标签之前。

    <div class="row">
        <ul class="get_in">
        <div class="col-md-6">
            <li><i class="fa fa-envelope-o"></i><p>[e-mail]</p></li>              
        </div>  
        <div class="col-md-6">
            <li><i class="fa fa-phone"></i><p>([phone]</p></li>       
        </div>
        </ul>
    </div>    

Answer 4

您不能在一个div 中打开 ul 元素，然后在另一个div 中关闭它。

这是您的 HTML：

    <div class="row">
    	  <div class="col-md-6">
            <ul class="get_in">
              <li><i class="fa fa-envelope-o"></i><p>[e-mail]</p></li>				
          </div>	
          <div class="col-md-6">
              <li><i class="fa fa-phone"></i><p>([phone]</p></li>		
            </ul>
          </div>	
        </div>

将您的 HTML 更改为：

    <div class="row">
    	  <div class="col-md-6">
            <ul class="get_in">
              <li><i class="fa fa-envelope-o"></i><p>[e-mail]</p></li>				    </ul>
          </div>	
          <div class="col-md-6">
            <ul>
              <li><i class="fa fa-phone"></i><p>([phone]</p></li>	
            </ul>
          </div>	
        </div>

我希望这对你有所帮助。