【问题标题】:How can I get rid of space in this <li> item? Its not padding or margin from what i can tell我怎样才能摆脱这个 <li> 项目中的空间?据我所知,它不是填充或边距
【发布时间】:2012-11-02 16:29:57
【问题描述】:

我有一些&lt;li&gt; 项目作为我正在制作的网站上的导航栏的一部分,我完全被项目之前出现的一些间距所困扰。

margin 和 padding 都是 0,list-style-type 设置为 none。有什么想法吗?

我忘记了website link! Here.

根据要求提供其他详细信息:

  • &lt;li&gt; 项目的文本是实际文本,而不是图像。
  • &lt;li&gt; 项目的文本未对齐(删除多余的
    '中心')。

相关 CSS:

/*****************

NAVIGATION STYLING

*****************/
#navigation{
    position: absolute;
    top: 0;
    z-index:10;
    text-align: center;
    width: 100%;
    margin: 0 auto 0 auto;
}
    #navigation a:link, a:visited{
        text-decoration: none;
        color: white;
        font-size:4.16em;
        margin: 0.5em;
        line-height: 1.5em;
        text-transform: uppercase;
        float: left;
        width:100%;
    }
    #navigation #me{

    }
    #navigation a.im:link, a.im:visited{
    line-height: 0em;
    }
    #navigation a.holly:link, a.holly:visited{
    line-height: 0em;
    }
    #navigation a.games_programmer:link, a.games_programmer:visited{
    line-height: 0em;
    }
    #navigation ul{
        height: 50px;
        text-decoration: none;
        background:#1d6482;
        margin: 0;
        padding: 0;
    }
    #navigation li{
        display: inline-block;
        list-style-type: none;
    }

【问题讨论】:

  • 我们需要更多信息才能正确解决这个问题。 'Portfolio' 文本是否可能是未定位的背景图像,或者 LI 上有text-align:right;
  • text-align:center 有什么用?和边距:0.5em;是怀疑!
  • 为什么要将左浮动的 A 元素放在内联块 LI 元素中?这没有意义。

标签: html css


【解决方案1】:

您在导航中的任何链接都应该有margin: 0.5em。这看起来是关于空间的大小。您的屏幕截图显示您已在 Chrome 中打开它。您应该能够看到应用于该元素的所有样式,并使用每个样式上的复选框来删除甚至更改应用的样式以找到罪魁祸首。

【讨论】:

  • 你是对的。 Holly 正在寻找 li 的样式,而问题在于 li 的孩子。
猜你喜欢
  • 2021-01-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-10-11
  • 1970-01-01
  • 2022-10-18
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多