Текст расположен не по центру панели навигации по горизонтали / Как сделать ‹br› вдвое меньше / Слишком много места между текстом панели навигации

Вот мой сайт: http://gyazo.com/56e069ebf8b5bd61ee30523886180b88

Есть ряд проблем с панелью навигации.

  1. Вы можете видеть, что текст или панель навигации не отцентрованы по горизонтали, на что указывает наведение (которое одинаково сверху и снизу)

  2. Между текстом слишком много места (и этот интервал - единственный способ, которым я нашел работу без перемещения текста при выделении или наведении курсора.

  3. Расстояние между ‹.br> в раскрывающемся меню слишком велико.

Итак, для 1. есть ли способ сделать текст или панель навигации (не знаю, в чем причина) центром, чтобы наведение выглядело более равномерным (по горизонтали)

Для 2. Есть ли способ, которым я могу закрыть промежуток между текстом, сохраняя при этом те же настройки заполнения, и поэтому он не перемещает текст, когда я использую функцию наведения.

И 3. Есть ли способ сделать так, чтобы ‹.br> занимал половину места, которое он сейчас использует?

Я также добавил jsfiddle, если это поможет: http://jsfiddle.net/d1a5eshs/

HTML-код для панели навигации:

<!--TOP NAV BAR SECTION-->
            <div id="nav_bar">
                <ul>
                    <li><a href="index.html">HOME</a>
                    </li>
                    <li><a href="status.html">STATUS</a>
                    </li>
                    <li><a href="info.html">INFO</a>
                    </li>
                    <li><a href="#">GAMEMODES</a>

                        <ul>
                            <li><a href="survival.html">SURVIVAL</a>
                            </li>
                            <li><br><a href="pure-pvp.html">PURE-PVP</a>
                            </li>
                            <li><br><a href="gamesworld.html">GAMESWORLD</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="rules.html">RULES</a>

                    </li>
                    <li><a href="vote.html">VOTE</a>

                    </li>
                    <li><a href="contact.html">CONTACT</a>

                    </li>
                </ul>
            </div>

И CSS для панели навигации:

/*TOP NAV BAR SECTION*/
#nav_bar {
    background-color: #a22b2f;
    padding:1px;
    box-shadow: 0px 2px 10px;
    height:45px;
    }         
#nav_bar ul li {
    display: inline-block;    
}
#nav_bar ul li a {
    color: white;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    margin-left:10px;
    padding-bottom:13px;
    padding-top:17px;
    padding-left:10px;
    padding-right:10px;
    margin-bottom:30px;
}
#nav_bar ul li ul {
    display: none;   
}
#nav_bar>ul>li>a:hover {
    background:#8c1b1f;
    padding-bottom:13px;
    padding-top:13px;
    padding-left:10px;
    padding-right:10px;   
}
#nav_bar>ul>li>ul>li>a:hover {
    background:#c9c9c9;
    padding-bottom:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;      
}
#nav_bar ul li:hover ul {
    display: block;
    position: absolute;
    padding: 0px;
    background: #e2e2e2;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:0px;
    padding-right:10px;
    border: 1px solid black;
    border-radius:5px;
}
#nav_bar ul li:hover ul li {
    display: block;

}
#nav_bar ul li:hover ul li a {
    color: black;
    font-size:12px;
    font-weight:bol;
    margin-left:-20px;
    padding-bottom:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;
}

html css navbar horizontal-scaling spacing
person Community    schedule 24.10.2014    source источник
comment
jsfiddle.net/9058vefk вы искали что-то подобное?   -  person Sai    schedule 24.10.2014
comment
Боюсь, это сломает весь сайт.   -  person    schedule 25.10.2014
comment
вам не нужно использовать ‹br› во внутреннем списке. отрегулируйте высоту строки, чтобы получить желаемый результат   -  person Sai    schedule 25.10.2014
comment
Ах, по крайней мере, одна проблема исправлена. Не могли бы вы сказать мне, как я могу это сделать, потому что я не уверен.   -  person    schedule 25.10.2014
comment
что касается центрирования основного ul li , разделите весь div (nav_bar) на 7 равных меньших div и примените это пространство к каждому элементу навигации   -  person Sai    schedule 25.10.2014
comment
Это звучит немного продвинуто для меня, не могли бы вы изменить код, возможно, если это не слишком много, чтобы спросить. Я бы даже не с чего начать это делать.   -  person    schedule 25.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

вам не нужно использовать
во внутреннем списке. отрегулируйте высоту строки, чтобы получить желаемый результат. http://www.jsfiddle.net/9058vefk

 #nav_bar ul li:hover ul {
  display: block;
  position: absolute;
  padding: 0px;
  background: #e2e2e2;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
  border: 1px solid black;
  border-radius:5px;
  line-height:1.5em; /* added this- you can change it th=o what you want */
  height:5em;
}

что касается центрирования основного ul li , разделите весь div (nav_bar) на 7 равных меньших div и примените это пространство к каждому элементу навигации.

person Sai    schedule 24.10.2014
comment
проверьте это stackoverflow.com/questions/1203910/ и css-трюки. ком/форумы/тема/ - person Sai; 25.10.2014
comment
начать там, чтобы получить представление. извините, я не могу сидеть и работать над вашим кодом, у меня есть своя работа, которую я должен делать. Но рад быть полезным и удачи - person Sai; 25.10.2014