0

div中具有“inline”类的两个元素需要堆叠，因此包含“SECURITIES”的元素需要在“AMS”下。唯一的问题是，如果我放在
AMS 元素下，那么右边的 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>
4

1 回答 1

1

Your .inline class should actually be set to display: inline-block, and you need to add display: block to your .sub_title. Make those changes and the issue you're referring to will be resolved. But then you'll notice that the entire menu is pushed down from the top. I started to solve this for you as well, but this is really basic css stuff, amigo. You'll need to restructure to make this work properly.

I'll give the following hints to set you on the right path:

  • The menu is dropped because the whole thing is display: inline (which shouldn't be the case in the first place), so everything drops to the bottom of the containing element. The height of your logo and subtitle are what's breaking the layout, but again, making them shorter isn't the answer.

  • You're going to want to replace those span.menu_items with anchors.

  • Check out professionally developed sites and inspect their menus using your browser's dev tools to get a feel for navigation best practices. Off the top of my head, zurb.com and css-tricks.com are good examples. And there's no shame in checking out the CSS powering the site you're knocking off. If you do so, you'll notice their menu items are all floated left.

  • If you haven't already, check out a few CSS frameworks. Zurb's Foundation and Twitter's (formerly) Bootstrap are the most popular. They'll allow you to continue learning design and coding without having to nail everything at once, and they provide an excellent context for adopting best practices.

Here's an updated CodePen. Hope this helps.

于 2013-10-29T06:13:11.633 回答