Question

我正在尝试关注最基本的HTML教程，并且没有运气让我的菜单项水平显示。

我正在创建一个开箱即用的ASP MVC 4站点，并尝试从一个简单的nav标记开始，并水平显示每个li。这个网站确实没什么，所以我将在下面显示完整的cshtml / css：

Layout.cshtml

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <div id="content">
            <nav>
                <ul>
                    <li>Search</li>
                    <li>Create PENSGC</li>
                    <li>Display Excpetions</li>
                    <li>Create Exception</li>
                </ul>
            </nav>               
            @RenderBody()   
        </div> 
    </body>
</html>

CSS

这大部分是基本的，开箱即用的东西。

html {
    background-image: url("/Images/Swiftnet-Background.jpg");
    margin: 0;
    padding: 0;
}

body {
    overflow: auto;
    margin: 0 auto;
}

#content {
    position: fixed;
    top: 30%;
    left: 40%;
    margin-top: -50px;
    margin-left: -100px;
    height: auto;
    height: auto;
    background-color: white; 
    border: 1px solid #999;
    border-radius: 5px 10px / 10px;
    -webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
    -moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
    box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}

#body {
    clear: both;
    padding-bottom: 35px;
}

/* menu */
nav {
    margin-bottom: 5px;
}

ul li {
    display: inline;
}

ul#menu {
    margin: 0;
    padding: 0;
    text-align: center;
}

    ul#menu li {
        margin: 0;
        padding: 0;
    }

Answer 1

好的，为什么你不用这个？

<nav>
    <span>Search</span>
    <span>Create Exception</span>
</nav>

Answer 2

尝试修改 CSS 代码

nav, ul {
    margin-bottom: 5px;
    display: inline-block;
}

ul li {
    display: inline-block;
}

水平显示菜单项

2 个答案: