Невозможно увеличить размер ширины на панели навигации с наследуемым классом - PullRequest
Новая
       0

Невозможно увеличить размер ширины на панели навигации с наследуемым классом

1 голос
/ 18 июня 2020

Я изучаю CSS3 и практикуюсь в создании навигационной панели. Я хочу расширить ширину input text до 50% в навигационной панели. Я пытаюсь применить класс: 

.main-nav__searchbar{
    width: 50%;
    margin: 0;
    padding: 0;
}

Но не работает 

*{
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
    margin:0px;
}

#product-overview {
    background-color: #ff1b68;
    width: 100%;
    height: 528px;
    padding: 10px;
}

.section-title{
    color: #2ddf5c;
    }

    #product-overview h1{
    color:white;
    font-family: 'Anton', sans-serif;
}

.main-header{
width:100%;
background: #2ddf5c;
padding:8px 16px;
}

.main-header > div{
    display: inline-block;
    vertical-align: middle;
}

.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

.main-nav__searchbar{
    width: 50%;
    margin: 0;
    padding: 0;
}
.main-nav{
    display: inline-block;
    text-align: right;
    width: calc(100% - 300px);
}

.main-nav__items{
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
    display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS course</title>
        <link rel="shortcut icon" href="favicon.png">
        <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <header class="main-header">
            <div>
                <a href="index.html" class="main-header__brand">
                    uHost
                </a></div>
                <div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
                <ul class="main-nav__items">
                    <li class="main-nav__item"> 
                        <a href="packages/index.html">Packages</a>
                    </li>
                    <li class="main-nav__item">
                        <a href="customers/index.html">Customers</a>
                    </li>
                    <li class="main-nav__item">
                        <a href="start-hosting/index.html">Start Hosting</a>
                    </li>
                </ul>
            </nav>
        </header>
        
    </body>
</html>

Почему это не работает, если у моего родительского класса есть свойство display:inline-block, как и все мои разметки? С уважением

1 Ответ

1 голос
/ 18 июня 2020

Обычно display: inline-block пытается уместить все элементы в одну строку. По этой причине ваш 50% кажется очень маленьким. Если вы установите его на 100% оставшегося пространства, это будет намного больше.

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

Теперь ваши элементы красиво расположены между собой. Каждый из них занимает достаточно места (вы еще можете настроить %). Кроме того, вы получаете достойный уровень отзывчивости сразу после установки flexbox . 

*{
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
    margin:0px;
}

#product-overview {
    background-color: #ff1b68;
    width: 100%;
    height: 528px;
    padding: 10px;
}

.section-title{
    color: #2ddf5c;
    }

    #product-overview h1{
    color:white;
    font-family: 'Anton', sans-serif;
}

.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding:8px 16px;
}

.main-header > div{
    vertical-align: middle;
}

.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

.main-nav__searchbar{
    width: 100%;
    margin: 0;
    padding: 0;
}
.main-nav{
    width: 50%;
    text-align: right;
}

.main-nav__items{

display: flex;
justify-content: space-evenly;
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS course</title>
        <link rel="shortcut icon" href="favicon.png">
        <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <header class="main-header">
            <div>
                <a href="index.html" class="main-header__brand">
                    uHost
                </a></div>
                <div><input type="text" placeholder="search" class="main-nav__searchbar"></div><nav class="main-nav">
                <ul class="main-nav__items">
                    <li class="main-nav__item"> 
                        <a href="packages/index.html">Packages</a>
                    </li>
                    <li class="main-nav__item">
                        <a href="customers/index.html">Customers</a>
                    </li>
                    <li class="main-nav__item">
                        <a href="start-hosting/index.html">Start Hosting</a>
                    </li>
                </ul>
            </nav>
        </header>
        
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...