Text-align: центральные кнопки без выравнивания в разделе <nav> - PullRequest
Новая
       73

Text-align: центральные кнопки без выравнивания в разделе <nav>

0 голосов
/ 07 мая 2020

Я не уверен, проблема ли это в этом коде или окружающем коде. Как видите, центрирование этих кнопок отлично работает при запуске фрагмента кода. 

<nav id="navbar" style="text-align:center">
    <div class="div">
    <button class="navbutton" onclick="window.location.href='index.html'" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Home</button>
    <button class="navbutton" onclick="window.location.href='reviews.php'" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Leave a review</button>
    <button class="navbutton" onclick="window.location.href='recommendations.php'"style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Current reviews</button>
    <button class="navbutton" onclick="window.location.href='mailto:info.awolindustries@gmail.com'" target="_blank" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Contact us</button>
    </div>
</nav>

Почему-то на моем сайте он просто превращает его в кучу кнопок.

Ответы [ 4 ]

1 голос
/ 07 мая 2020

Вам необходимо определить большую ширину для этого контейнера. В вашем css измените класс div с width: 200px; на width: 100%;

enter image description here

0 голосов
/ 07 мая 2020

, как я уже сказал, держите код разделенным :) Представьте, если вы хотите, чтобы ваше меню было другим цветом, вам придется менять цвет во многих местах. Теперь у вас все в одном месте, и вы можете проверять мнения других людей о настройках. 

<nav id="navbar" style="text-align:center">
    <div class="div">
        <button class="navbutton" onclick="window.location.href='index.html'">Home</button>
        <button class="navbutton" onclick="window.location.href='reviews.php'">Leave a review</button>
        <button class="navbutton" onclick="window.location.href='recommendations.php'">Current reviews</button>
        <button class="navbutton" onclick="window.location.href='mailto:info.awolindustries@gmail.com'" target="_blank">Contact us</button>
    </div>
</nav>
<style>
    .navbutton {
  background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;
}
</style>

Ваш сайт:

0 голосов
/ 07 мая 2020

Старайтесь, чтобы код был красивым и аккуратным, стилизовав внешний файл или, по крайней мере, отдельно. Когда вы нажимаете «Оставить обзор», ваша панель навигации выглядит так, как будто вы используете sh.

Я скопировал код формы "Оставить отзыв" на странице: 

<div class="div">
    <button class="navbutton" onclick="window.location.href='index.html'">Home</button>
    <button class="navbutton" onclick="window.location.href='reviews.php'">Leave a review</button>
    <button class="navbutton" onclick="window.location.href='recommendations.php'">Current reviews</button>
    <button class="navbutton" onclick="window.location.href='mailto:info.awolindustries@gmail.com'"
        target="_blank">Contact us</button>
</div>
0 голосов
/ 07 мая 2020

Это потому, что на вашем веб-сайте вы установили фиксированную ширину 200 пикселей для элемента div. Удалите это, и кнопки будут go в одну строку;

...