Question

我有3列列表项，我不明白为什么我的第一列（＃col1）有一个边距 - 其他列没有。我希望保证金权利对我的所有专栏都是有用的，但我没有成功做到这一点。你知道问题出在哪里吗？

我的问题是：

我的HTML：

<div id="body-content">
            <h1>Title</h1>

           <img src="image1.jpg" width="700px" height="360px" />
            <div id="info">
          <h1>Info</h1>
          <ul id="col1">
            <li><i class="fa fa-phone" title="phone"></i>Phone</li>
            <li><i class="fa fa-print" title="Fax"></i>Phone</li>

          </ul>
          <ul id="col2">
            <li><i class="fa fa-home" title="adress"></i> Adress</li>

             <li ><i class="fa fa-map-marker" title="Map"></i><a  class="button" href="#showMap"><span>Show map</span></a></li>   
         </ul>
          <ul id="col3">
            <li><i class="fa fa-envelope-o" title="phone"></i>Email</li>

            <li><i class="fa fa-envelope-o" title="Email"></i>Email</li>       
          </ul>
         </div>

我的css：

#info h1{color:red; font-size:23px; margin-bottom:0;}

#info ul {list-style:none;}

#info ul li a {text-decoration:none; color:#000;}

#col1{float:left; width:295px;font-size:16px;  color:#000; margin-right:0;}

#col2{float:left; margin-right:50px;}

Answer 1

您的第一列#col1，没有，因为您设置了margin-right:0;。

相反，你的ul左边有一个填充，默认情况下由浏览器设置（IE 7左边距，所有其他浏览器左边填充。）

要删除默认值，您需要在规则中添加两个属性：

#info ul {list-style:none; margin-left: 0; padding-left: 0; }

http://jsfiddle.net/r2Y6d/5/

这将摆脱左边距。

但是，它看起来像表格数据。如果您还不知道，表格数据的最具语义的HTML结构是<table>。或者，如果它是简单的数据值对，您可以使用定义列表（<dl>）。

Answer 2

THIS你想做什么？我删除了width:295px;，margin-right:0;并添加了#col3{float:left;}

试图删除我的＆＃34; <ul>＆＃34;元件</UL>

2 个答案: