Навигация не будет "ломаться" или падать на новую строку, если она центрирована

Я пытаюсь создать сайт для моего кузена, который не знает ни одной строки кода. И я почти ничего не делаю: D

Ну, я могу окунуться в некоторые основные вещи.

Но я не могу просто понять, как это сделать на Nav-bar. Проблема, с которой я сталкиваюсь, я пытаюсь сделать сайт отзывчивым. Как сейчас, код отлично работает при изменении размера окна до меньшего размера (т.е. Nav-bar накладывает на себя, как предполагалось). НО Я хочу, чтобы четыре (4) ссылки были центрированы относительно заголовка.

Заголовок, как вы увидите, имеет прописку с обеих сторон 13%. Затем я хочу, чтобы навигатор был центрирован в оставшихся 74%. Надеюсь, это имеет смысл, я уверен, вы, ребята, намного лучше меня, делая это.

У меня пока нет веб-сайта, поэтому вам нужно будет увидеть код для себя.

Я попытался добавить width:25%; и width:calc(100/4); Но когда я добавляю к нему ширину, он становится центрированным, как я хочу, но он не падает/ломается на новую строку, он скользит друг к другу.

Спасибо огромное за любую помощь!

Вот HTML:

<title>Fanny Schwarz Design</title>
 
 
 <div id="container">
 <div id="header">
 
 </div>
 <div id="navigation">
 <ul>
 <li>
 <a href="home.html" target="_blank">
 ♦<span>home</span>♦
 </a>
 </li>
 <li>
 <a href="portfolio.html" target="_blank">
 ♦<span>portfolio</span>♦
 </a>
 </li>
 <li>
 <a href="about.html" target="_blank">
 ♦<span>about</span>♦
 </a>
 </li>
 <li>
 <a href="contact.html" target="_blank">
 ♦<span>contact</span>♦
 </a>
 </li>
 </ul>
 </div>
 <div id="content">
 <h2>Page heading</h2>
 <p>Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
 <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </div>
 <div id="footer">
 <div> 
 <span>©</span>
 <span>fanny schwarz 2014</span>

 </div>
 </div>
 </div>

Вот CSS:

body {
 background-color:#F9E1F7;
 font-family:monospace;
}
p {
 text-align:left;
}
#container {
 padding-left:13%;
 padding-right:13%;
 background:#F9E1F7;
 margin:0 auto;
}
#header {
 background:#ccc;
 text-align:none;
 max-height:290px;
}
.logo {
 position:relative;
 max-height:100%;
 max-width:100%;
 left:0;
}
#navigation {
 width:100%;
 background:#F9E1F7;
 letter-spacing:2px;
}
#navigation ul {
 overflow:hidden;
 margin:0;
 padding:0;
}
#navigation ul li {
 list-style:none;
 float:left;
 text-align:center;
 display:inline-block;
 width: 25%;
}
#navigation li a {
 display:block;
 color:#000;
 text-decoration:none;
 padding:10px;
}
#content {
 clear:left;
 padding:20px;
}
#content h2 {
 color:#000;
 font-size:160%;
 text-align:left;
 margin:0 0 .5em;
}
#footer {
 background:#F9E1F7;
 text-align:center;
 height:1%;
 font-size:15px;
 max-height:50px;
 line-height:50px;
 padding:20px;
}
#navigation li a:hover, #navigation li a:active {
 text-decoration:underline;
}
1 ответ

Вот стили CSS, которые вызывают проблемы:

#navigation ul {
overflow:hidden;
}

#navigation ul li {
float:left;
text-align:center;
width: 25%;
}

Измените их на:

#navigation ul {
 width:100%;
 text-align:center;
 margin:0 auto;
 padding:0;
}

#navigation ul li {
 list-style:none;
 display:inline-block;
}

Это должно решить вашу проблему. Причины:

  1. overflow:hidden скрывают вещи, которые выходят из вашего li на мобильных браузерах.

  2. Нет ничего плохого в float:left, за исключением того, что вы пытались li лики. Вы не можете этого сделать, когда применяется стиль float:left.

  3. Я думаю, вы хотели поставить text-align:center на ul, а не на li.

  4. width:25% заставляли ваш li перекрываться, а не ломаться до следующей строки.

ЗДЕСЬ.

Надеюсь это поможет!

licensed under cc by-sa 3.0 with attribution.