html - CSS，一行菜单，中间元素有 2 个内部元素需要堆叠而不影响菜单项-6ren

html - CSS，一行菜单，中间元素有 2 个内部元素需要堆叠而不影响菜单项

转载作者：太空宇宙更新时间：2023-11-04 14:24:34

div中类为“inline”的两个元素需要堆叠，所以包含“SECURITIES”的元素需要在“A.M.S”下。唯一的问题是，如果我将
放在 A.M.S 元素下，那么右边的 3 个菜单项也会换行。

所有菜单项都需要在同一行。这是我的灵感，你可以看到我想要的效果。 http://www.infinum.co/

编辑 1这是它现在的样子: http://cdpn.io/wlEpA

编辑 2见图片:https://dl.dropboxusercontent.com/u/63494571/howthis.jpg

我现在无法将菜单项的高度设置为 100%。我希望能够更改“菜单”div 的高度，这将影响菜单项，使它们垂直居中。

不过目前，文本不在元素的中心，元素的顶部与“SECURITIES”文本的顶部而不是页面顶部对齐。它应该如标有“A”的图片所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AMS Securities</title>
<style type="text/css">
body {
    background-color:#222222;
    margin:0px;
    font-family:Calibri;
}
.container {
    width:90%;
    margin:0 auto;
}
.content {
    background-color:#f4f4f4;
    text-align:center;  
}
.inline { display:inline; }

.menu { text-align:center; height:84px; }
.menu_item { color:#bababa; font-size:18px; padding:1.5em; cursor:pointer; }
.menu_item:hover { color:#eb1217; }
.selected { color:#eb1217; border-top:#eb1217 4px solid; }

.title { color:#eb1217; font-size:52px; }
.sub_title { font-weight:bold; color:#f4f4f4; font-size:20px; }

.content {
    padding:3em 0em;    
}
</style>
</head>
<body>
    <div class="container">
        <div class="menu">
            <span class="menu_item selected">HOME</span>
            <span class="menu_item">VENUES</span>
            <span class="menu_item">PHOTOS</span>

            <div class="inline">
                <span class="title">A.M.S</span>
                <span class="sub_title">SECURITIES</span>
            </div>

            <span class="menu_item">ABOUT</span>
            <span class="menu_item">CONTACT</span>
            <span class="menu_item">LOGIN</span>
        </div>
        <div class="content">
            content will go here
        </div>
    </div>
</body>
</html>

最佳答案

您的 .inline 类实际上应该设置为 display: inline-block，并且您需要将 display: block 添加到您的 .sub_title。进行这些更改，您所指的问题将得到解决。但是随后您会注意到整个菜单都是从顶部向下推的。我也开始为你解决这个问题，但这真的是基本的 css 东西， friend 。您需要进行重组才能使其正常工作。

我将给出以下提示，让您走上正确的道路:

菜单被删除是因为整个内容都是 display: inline(一开始就不应该是这种情况)，所以所有内容都放在包含元素的底部。 Logo 和副标题的高度会破坏布局，但再次强调，让它们变短并不是解决问题的办法。
您将要用 anchor 替换那些 span.menu_item。
查看专业开发的网站并使用浏览器的开发工具检查他们的菜单，以了解导航最佳做法。在我的脑海中，zurb.com 和 css-tricks.com 就是很好的例子。检查为您关闭的网站提供支持的 CSS 并没有什么可耻的。如果这样做，您会注意到它们的菜单项都向左浮动。
如果您还没有，请查看一些 CSS 框架。 Zurb 的 Foundation 和 Twitter 的(以前的)Bootstrap 是最受欢迎的。它们将使您能够继续学习设计和编码，而不必一次搞定所有事情，并且它们为采用最佳实践提供了极好的环境。

Here's an updated CodePen.希望这会有所帮助。

关于html - CSS，一行菜单，中间元素有 2 个内部元素需要堆叠而不影响菜单项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19648369/