Панель навигации CSS UL не центрирована

Question

Панель навигации CSS UL не центрирована

0

Я изучаю, как сделать отзывчивый веб-сайт после учебника здесь http://www.hongkiat.com/blog/responsive-web-nav/

У меня проблема: я не могу позиционировать что-либо в правой UL внутри NAV и STILL KEEP THE UL CENTERED IN SCREEN. По какой-то причине, даже если

ul{display:inline-block;}

а также

nav{text-align:center;}

ссылка #pull будет толкать UL влево, а не центрировать больше. Я хочу сделать регистрационную форму, размещенную справа от UL в NAV, где #pull находится прямо сейчас, и я не могу на всю жизнь понять, как это сделать, сохраняя UL полностью в центре экрана, независимо от того, справа от UL, похоже, нажимает UL, даже если он всегда должен быть центрирован.

Я уверен, что это просто базовая проблема с позиционированием CSS, которую я не могу понять, потому что я новичок в этом, но мне просто нужно разместить больше контента, и я не могу понять, как это сделать.

JSFiddle

cpuxtech 05 янв. 2014, в 07:40

Источник

0

jsfiddle.net/aF3Pd Это JSFiddle
cpuxtech 05 янв. 2014, в 06:01
0

возможное дублирование элементов позиционирования панели навигации CSS
halfer 02 фев. 2014, в 16:41
0

Я не могу определиться, если вы задали два вопроса (а затем повторно задали их оба вскоре после этого) или задали один вопрос (а затем повторили его три раза). В любом случае, здесь происходит слишком много копирования и вставки. Пожалуйста, придерживайтесь вопросов только один раз, и если вы обнаружите, что задаете что-то похожее, но не идентичное, отметьте это в вопросе, чтобы избежать близких / отрицательных голосов.
halfer 02 фев. 2014, в 16:44

Показать ещё 1 комментарий

Теги:

html

css

css3

css-float

4 ответа

Ещё вопросы

возможное дублирование элементов позиционирования панели навигации CSS
Я не могу определиться, если вы задали два вопроса (а затем повторно задали их оба вскоре после этого) или задали один вопрос (а затем повторили его три раза). В любом случае, здесь происходит слишком много копирования и вставки. Пожалуйста, придерживайтесь вопросов только один раз, и если вы обнаружите, что задаете что-то похожее, но не идентичное, отметьте это в вопросе, чтобы избежать близких / отрицательных голосов.

Rayan Bouajram · Answer 1 · 2014-01-05T05-03-00.000Z

Легкий способ сделать это - использовать свойство position css для размещения кнопки "Меню" над UL. Убедитесь, что вы установили тег nav в position:relative свойство, затем нажмите кнопку меню и установите следующее:

position:absolute;
top:0;
right:0;

Это должно держать кнопку меню в правом верхнем углу, особенно в случае адаптивного веб-дизайна.

Смотрите скрипку: http://jsfiddle.net/p3tK5/

Kris Winiarski · Answer 2 · 2014-01-05T04-11-00.000Z

Попробуйте добавить

position:relative;
left: 8vw;

к вашему nav ul. См. Это для получения дополнительной информации о vw и vh и многом другом.

Sunny · Answer 3 · 2017-07-19T05-15-00.000Z

Просто добавьте display:table; margin: 0 auto display:table; margin: 0 auto на вашем UL.

Raunak Kathuria · Answer 4 · 2014-01-05T05-29-00.000Z

Вы используете px в гибком дизайне вместо использования%

Обновлен CSS//вся ширина в%

nav{
    height:50px;
    width:100%;
}

nav ul{
    padding:0;
    margin: 0 auto;     /*No Y-axis margin, Only an Auto X-axis margin, making the ul centered*/
    width:80%;  
}

nav li{
    list-style:none; /*display:inline; also gets rid of the list styles*/ 
    float:left;      /*Floating the menu list items to the left so they will be
                  displayed horizontally side by side, but floating an element
                      will also cause their parent to collapse*/
    dislay: inline-block;
    min-width: 23%;
}

#navaside {
    height:50px;
    width:15%;                          /* Takes up 100% of the parent width, 
}

#navaside a#pull{

    color:#fff;                 /* Color of the link */
    display:inline-block;       /* display:block (also)--Allows the width and line height to actually take affect */
    width:100%;                /* 5 elements at 140px = 700px, the width of the 
}

Проверьте http://jsfiddle.net/raunakkathuria/aF3Pd/7/

Вы можете создать стиль или li в соответствии с вашим требованием, я только что исправил некоторые css, чтобы сделать его отзывчивым