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>111111@hotmail.com</p>
      </li>
  </div>
  <div class="col-md-6">
    <li><i class="fa fa-phone"></i>
      <p>(+41) 11111111</p>
    </li>
    </ul>
  </div>
</div>

Answer 1

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

<div class="row">
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-envelope-o"></i><p>111111@hotmail.com</p></li>
    </ul>
  </div>  
  <div class="col-md-6">
    <li><i class="fa fa-phone"></i><p>(+41) 11111111</p></li>       
  </div>  
</div>

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

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

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

<div class="row">
  <div class="col-md-6">
    <i class="fa fa-envelope-o"></i> 111111@hotmail.com
  </div>
  <div class="col-md-6">
    <i class="fa fa-phone"></i> (+41) 11111111
  </div>
</div>

Answer 2

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

＆＃13;

.get_in {
    list-style: none;
}

＆＃13;

<div class="row">
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-envelope-o"></i>
        <p>111111@hotmail.com</p>
      </li>
    </ul>
  </div>
  <div class="col-md-6">
    <ul class="get_in">
      <li><i class="fa fa-phone"></i>
        <p>(+41) 11111111</p>
      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 3

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

    <div class="row">
        <ul class="get_in">
        <div class="col-md-6">
            <li><i class="fa fa-envelope-o"></i><p>111111@hotmail.com</p></li>              
        </div>  
        <div class="col-md-6">
            <li><i class="fa fa-phone"></i><p>(+41) 11111111</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>111111@hotmail.com</p></li>				
          </div>	
          <div class="col-md-6">
              <li><i class="fa fa-phone"></i><p>(+41) 11111111</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>111111@hotmail.com</p></li>				    </ul>
          </div>	
          <div class="col-md-6">
            <ul>
              <li><i class="fa fa-phone"></i><p>(+41) 11111111</p></li>	
            </ul>
          </div>	
        </div>

我希望这对你有帮助。

连续删除列表

4 个答案: