Вопрос:
Хорошо после многих поисковых запросов я наконец выяснил, как центрировать ссылки меню в середине панели навигации. После этого я столкнулся с другой проблемой… добавлением логотипа в панель навигации. Моя проблема заключается в том, что логотип не входит в навигационную панель, а вместо этого выходит за панель. Я хотел бы иметь логотип, плавающий влево в навигационной панели. Я пробовал несколько вещей, включая добавление display: inline-block/inline ко всем основным элементам, но никакой разницы. Хотя я попытался добавить display: inline к nav ul, но фон навигационной панели исчез (см. Второе изображение), и я не могу добавить фон, добавив высоту и ширину.
Ps Извините, если есть несколько ошибок, связанных с любителями, я только начал кодировать несколько месяцев назад.
Спасибо за ваше время!
Как выглядит навигационная панель:
Как выглядит панель навигации с display: inline;
Вот мой HTML и CSS:
#logo { height: 50px; width: auto; float: left; } nav ul { list-style-type: none; overflow: hidden; margin: 0; padding: 0; background-color: #1a1a1a; text-align: center; border: 1px solid #e7e7e7; display: inline-block; width: 100%; } nav li { display: inline-block; } nav a { display: inline-block; padding: 16px 15px; text-decoration: none; font-family: arial; font-weight: bold; color: white; } nav a:hover { background-color: orange; color: white; }<nav> <img id=»logo» src=»https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif»></img> <ul> <li><a href=»»>Game 1</a> </li> <li><a href=»»>Game 2</a> </li> <li><a href=»»>Game 3</a> </li> </ul> </nav>Лучший ответ:
Просто вставьте его в свою ul.
#logo { height: 50px; width: auto; float: left; } nav ul { list-style-type: none; overflow: hidden; margin: 0; padding: 0; background-color: #1a1a1a; text-align: center; border: 1px solid #e7e7e7; display: inline-block; width: 100%; } nav li { display: inline-block; } nav a { display: inline-block; padding: 16px 15px; text-decoration: none; font-family: arial; font-weight: bold; color: white; } nav a:hover { background-color: orange; color: white; }<nav> <ul> <img id=»logo» src=»https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif»/> <li><a href=»»>Game 1</a> </li> <li><a href=»»>Game 2</a> </li> <li><a href=»»>Game 3</a> </li> </ul> </nav>Ответ №1
Самый простой способ – это, вероятно, сделать position:absolute
https://jsfiddle.net/fj1r6b1e/
#logo { height: 50px; width: auto; position:absolute; }
Кроме того, img тег должен быть написан следующим образом: <img src=»…»/> вместо <img></img>
Ответ №2
Дайте логотип img position: fixed. Это не повлияет на положение/центрирование элементов меню.