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%。我希望能够更改“ menu” 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东西,朋友。您需要进行重组以使其正常工作。

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


菜单被删除是因为整个内容都是display: inline(首先不应该是这种情况),因此所有内容都下降到包含元素的底部。徽标和字幕的高度是破坏布局的原因,但是,再次缩短它们并不是答案。
您将要用锚替换那些span.menu_item
检出专业开发的网站,并使用浏览器的开发工具检查其菜单,以领会导航最佳实践。头疼的是,zurb.com和css-tricks.com是很好的例子。而且,检出CSS可以为您要关闭的网站提供支持也没有什么可耻的。如果这样做,您会发现他们的菜单项都向左浮动。
如果还没有,请查看一些CSS框架。 Zurb的基金会和Twitter的(以前)Bootstrap最受欢迎。它们将使您能够继续学习设计和编码,而不必一次钉牢所有内容,并且它们为采用最佳实践提供了绝佳的环境。


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

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

10-11 22:28
查看更多