Question

我正在尝试制作一个简单的响应式导航，但我似乎无法消除链接之间的空格。非常感谢任何帮助。

这是我的代码：的CSS：

.nav{
	width:100%; text-align:centre; margin:0 auto;max-width:1010px;
}
.nav ul{
	line-height:50px;
}
.nav li{
	display:inline; list-style-type: none;border-right:#333333 1px solid;
}
.nav li:hover{
	
}
.nav a{
	text-decoration:none; padding:10px; color:#000; font-family: sans-serif;
}
.nav a:hover{
	color:#c00;background:#999999;
}

HTML：

<div class="nav"><!-- nav -->
        <span class="menu-button"></span>
        <ul class="clearfix menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
</div><!--/nav-->

Answer 1

使用CodeRomeos答案，大部分间距/填充被删除，但链接之间仍有一些间距。从您的请求到消除链接之间的间距，然后下面的解决方案将完全删除间距（虽然它看起来会更好IMO，链接之间至少有一些填充）。

.nav {
  width: 100%;
  text-align: centre;
  margin: 0;
  max-width: 1010px;
}
.nav ul {
  line-height: 16px;
}
.nav li {
  display: inline;
  list-style-type: none;
  border-right: #333333 1px solid;
  margin: 0;
  padding: 0;
  float: left;
}
.nav a {
  text-decoration: none;
  color: #000;
  font-family: sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.nav a:hover {
  color: #c00;
  background: #999999;
}

<div class="nav">
  <span class="menu-button"></span>
    <ul class="clearfix menu">
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About Us</a>
      </li>
      <li>
        <a href="#">Portfolio</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
</div>

Answer 2

与你的css there is padding defined 10px。

一样

.nav a{
text-decoration:none; padding:10px 5px; color:#000; font-family: sans-serif;
}

将其设为

.nav a{text-decoration:none; padding:10px 2px; color:#000; font-family: sans-serif;}

希望这对你有帮助。！

Answer 3

我只是将你的css从显示中切换了一下：内联到浮点数：左边是li标签。希望它有所帮助，虽然浮动可能不是最好的方法。

at ErrorHandler ->handleError ('2', 'spl_object_hash() expects    parameter 1 to be object, integer given', '/home/gabriel/Documents/CasaDoGesso/vendor/doctrine/orm/lib/Doctrine/ORM/UnitOfWork.php', '1389',   array('entity' => '2', 'assume' => '2'))
at spl_object_hash ('2')
in vendor/doctrine/orm/lib/Doctrine/ORM/UnitOfWork.php at line 1389  +
at UnitOfWork ->getEntityState ('2', '2')
in vendor/doctrine/orm/lib/Doctrine/ORM/UnitOfWork.php at line 788  +
at UnitOfWork ->computeAssociationChanges (array('fieldName' =>    'clientId', 'targetEntity' => 'CDG\PanelBundle\Entity\Client', 'inversedBy' => 'budget', 'joinColumns' => array(array('referencedColumnName' => 'id', 'name' => 'client_id')), 'type' => '2', 'mappedBy' => null, 'isOwningSide' => true, 'sourceEntity' => 'CDG\PanelBundle\Entity\Budget', 'fetch' => '2', 'cascade' => array(), 'isCascadeRemove' => false, 'isCascadePersist' => false, 'isCascadeRefresh' => false, 'isCascadeMerge' => false, 'isCascadeDetach' => false, 'sourceToTargetKeyColumns' => array('client_id' => 'id'), 'joinColumnFieldNames' => array('client_id' => 'client_id'), 'targetToSourceKeyColumns' => array('id' => 'client_id'), 'orphanRemoval' => false), '2')
in vendor/doctrine/orm/lib/Doctrine/ORM/UnitOfWork.php at line 687  +
at UnitOfWork ->computeChangeSet (object(ClassMetadata), object(Budget))
in vendor/doctrine/orm/lib/Doctrine/ORM/UnitOfWork.php at line 404  +
at UnitOfWork ->computeScheduleInsertsChangeSets ()
in vendor/doctrine/orm/lib/Doctrine/ORM/UnitOfWork.php at line 711  +
at UnitOfWork ->computeChangeSets ()
in vendor/doctrine/orm/lib/Doctrine/ORM/UnitOfWork.php at line 297  +
at UnitOfWork ->commit (null)
in vendor/doctrine/orm/lib/Doctrine/ORM/EntityManager.php at line 340  +
at EntityManager ->flush ()
in src/CDG/PanelBundle/Controller/BudgetController.php at line 36  +
at BudgetController ->addAction (object(Request))
at call_user_func_array (array(object(BudgetController), 'addAction'),   array(object(Request)))
in app/bootstrap.php.cache at line 3109  +
at HttpKernel ->handleRaw (object(Request), '1')
in app/bootstrap.php.cache at line 3071  +
at HttpKernel ->handle (object(Request), '1', true)
in app/bootstrap.php.cache at line 3222  +
at ContainerAwareHttpKernel ->handle (object(Request), '1', true)
in app/bootstrap.php.cache at line 2444  +
at Kernel ->handle (object(Request))
in web/app_dev.php at line 28  +

到

.nav li {
display: inline;
}

http://codepen.io/anon/pen/OyVLOK

无法摆脱链接之间的空间

3 个答案: