为什么HTML跨越垂直堆叠？

-4

在我的网站上，我有两个SPANS：右上角的“服务”和“产品”（灰色条）。由于某些原因，它们被垂直堆叠，我期望它们水平对齐，因为SPANS只是标记文本块内文本的标记。为什么HTML跨越垂直堆叠？

段：

<div id="access"> 
    <div> 
    <a href="#"> 
     <span>services </span> 
    </a> 
    <a href="#"> 
     <span>products</span> 
    </a> 
    </div> 
</div>

这个CSS是问题，我觉得

#access { 
    /* background: #74C20E; 
    background: #716417;*/ 
    display: block; 
    float: left; 
    margin: 5px auto; 
    background-color:rgb(181, 197, 207); 
    -moz-border-radius: 0px; 
    border-radius: 0px; 

    width: 1200px; 

<!-- width: 940px; 
--> 
} 

#access .menu-header, 
div.menu { 

    font-size: 13px; 
    margin-left: 12px; 
    width: 928px; 
} 
#access .menu-header ul, 
div.menu ul { 
    list-style: none; 
    margin: 0; 
} 
#access .menu-header li, 
div.menu li { 
    float: left; 
    position: relative; 
} 
#access a { 
    color: white; 
    display: block; 
    line-height: 38px; 
    padding: 0 10px; 
    text-decoration: none; 
} 
#access ul ul { 
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    display: none; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    float: left; 
    width: 180px; 
    z-index: 99999; 
} 
#access ul ul li { 
    min-width: 180px; 
} 
#access ul ul ul { 
    left: 100%; 
    top: 0; 
} 
#access ul ul a { 
    background: #0f9195; 
    line-height: 1em; 
    padding: 10px; 
    width: 160px; 
    height: auto; 
} 
#access li:hover > a, 
#access ul ul :hover > a { 
    background: #635ba9; 
    color: #fff; 
} 
#access ul li:hover > ul { 
    display: block; 
} 
#access ul li.current_page_item > a, 
#access ul li.current-menu-ancestor > a, 
#access ul li.current-menu-item > a, 
#access ul li.current-menu-parent > a { 
    color: #fff; 
}

小提琴是这里

http://jsfiddle.net/9uK9L/

有谁知道为什么他们被垂直显示，而不是水平？

来源

2014-03-24 Oliver Watkins

请添加有意义的代码和问题描述在这里。请不要将链接到需要修复的网站 - 否则，一旦问题得到解决，此问题将会丢失未来访问者的任何价值。发布 [简短，独立，正确的示例（SSCCE）]（http://www.sscce.org/），这表明您的问题将帮助您获得更好的答案。有关更多信息，请参阅 [我的网站上的某些内容不起作用。我可以只粘贴一个链接到它吗？]（http://meta.stackexchange.com/questions/125997/）谢谢！ – j08691

您是否在宣传您的网站？ –

您需要在问题中提供[测试用例]（http://sscce.org/）。链接到外部网站是不好的形式，并且由于您可能会在某个时候修正它，所以它会将问题视为无稽之谈，因为它将取决于不再存在的代码。 – Quentin

span默认情况下内联元素是内联的，除非被覆盖，并且它们仍然在页面上内联。这是他们的父母a元素是问题。相关页面结构如下：

<div id="access"> 
    <div> 
    <a href="#"> 
     <span>services </span> 
    </a> 
    <a href="#"> 
     <span>products</span> 
    </a> 
    </div> 
</div>

在你的CSS你设置

#access a{ 
    display: block; 
}

这导致锚成为块级元素，并且堆叠在彼此的顶部，独立的跨度的行为。只需从#access a中删除display: block，它将按预期工作。

我建议您熟悉一下Chrome（或其他任何一个）调试器https://developers.google.com/chrome-developer-tools/docs/elements，它可以让你检查你的页面，并通过检查一个元素并观察正在应用的样式来相当容易地简化这些问题。

来源

2014-03-24 16:38:13

变化显示：块显示：inline-block的

#access a { 
    color: white; 
    display:inline-block; 
    line-height: 38px; 
    padding: 0 10px; 
    text-decoration: none; 
}

来源

2014-03-24 17:11:09 riazshah

为什么HTML跨越垂直堆叠？

回答

相关问题