Отображать пункты меню по горизонтали

#html #css #asp.net-mvc #asp.net-mvc-4

#HTML #css #asp.net-mvc #asp.net-mvc-4

Вопрос:

Я пытаюсь следовать, вероятно, самым простым руководствам по 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;
    }

1. Для меня выглядит горизонтально jsfiddle.net/zq9VP Что именно не работает? Вы имели в виду, что li s выполняется на несколько строк, когда окно браузера узкое?

2. Они также отображаются для меня как встроенные. Конечно, даже встроенные элементы будут переноситься на новую строку, если в области просмотра недостаточно ширины, и нет кода, указывающего на обратное.

3. В чем дело с элементом #body и ul #menu? Для меня это похоже на опечатки. В HTML-коде нет идентификаторов тела и меню. Высота: авто дублируется. Если вы хотите устранить некоторые из форматирования браузера по умолчанию, просто используйте один из сброшенных css-файлов вместо того, чтобы добавлять кучу объявлений padding: 0 и margin: 0.

Ответ №1:

Хорошо, почему вы не используете это?

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

Ответ №2:

Попробуйте отредактировать свой CSS-код

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

ul li {
    display: inline-block;
}