#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;
}
Комментарии:
1. Это ничего не меняет.