Блог

Главная - Вопросы по программированию - пробел между моим элементом навигации не будет адаптироваться к области просмотра

пробел между моим элементом навигации не будет адаптироваться к области просмотра

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

я хочу, чтобы пространство между моими элементами навигации растягивалось или уменьшалось в зависимости от области просмотра, затем я использую процентную меру для ширины каждого элемента навигации, но, похоже, это не работает из-за отображения:flex Вот код :

     /*CSS*/
    <style type="text/css" media="screen">
        .topbar{
            display: flex;
            justify-content: space-between;
            padding: 30px;
            background-color: lightgrey;
        }
        
        .topbar nav a{
            display: inline-block;
            width: 15%
        }
        .icon a{
            margin:0px 10px;
        }
    </style>  
 <!-- /*HTML*/-->
    <header  class="topbar">
            <nav>
                <a  href="#">Home</a>
                <a  href="#">about</a>
                <a  href="#">products</a>
                <a  href="#">contact</a>
            </nav>
            <div class="icon">
                <a href="#" >Sign up<i class="fab fa-facebook-f"></i></a>
                <a href="#" >Log in<i class="fab fa-twitter"></i></a>
            </div>
    </header>
    <!-- /header -->

Поэтому, когда я удаляю display:flex и добавляю display:inline-block в верхнюю панель навигации, пространство правильно адаптируется к области просмотра, но мне нужен гибкий.

Ответ №1:

Вам нужно сделать <nav> элемент гибким блоком с flex-grow установленным 1 значением, чтобы он заполнял все доступное пространство.

     .topbar{
        display: flex;
        justify-content: space-around;
        padding: 0px;
        background-color: lightgrey;
        flex-wrap:wrap;
    }
    
    .topbar nav {
      display:flex;
      flex-grow:1;
       justify-content: space-around;
       position:relative;
    }
    
    .topbar nav a{
        display:inline-block;
        width: 15%;

    }
    .icon a{
        margin:0px 10px;
    }  
 <header  class="topbar">
        <nav>
            <a  href="#">Home</a>
            <a  href="#">about</a>
            <a  href="#">products</a>
            <a  href="#">contact</a>
        </nav>
        <div class="icon">
            <a href="#" >Sign up<i class="fab fa-facebook-f"></i></a>
            <a href="#" >Log in<i class="fab fa-twitter"></i></a>
        </div>
</header>

Ответ №2:

По сути, когда вы используете display: flex на верхней панели навигации a, вы заставляете каждый a элемент использовать display flex . Что вы могли бы сделать, это добавить дополнительный контейнер для ваших ссылок и использовать flex для контейнера. Или, если вы хотите использовать flex для каждого a элемента, используйте inline-flex 

 .topbar{
    display: flex;
    justify-content: space-between;
    padding: 30px;
    background-color: lightgrey;
}

.topbar nav a{
    display: inline-flex;
    /*width: 15%;*/
}
.icon a{
    margin:0px 10px;
}