Je suis nouveau dans le monde de la conception Web, donc je jouais un peu avec l'aide de bootstrap et w3 et j'ai rencontré le problème suivant. J'ai ceci en ce moment: ce que j'ai
et je veux que les deux boutons à droite s'adapter à toute la hauteur de la barre de navigation, y a-t-il un moyen de le faire? quelque chose comme un match_parent dans Android. Voici mon code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
<meta charset="utf-8">
<title>Test page</title>
<script src="script.js"></script>
</head>
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li>
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
<a href="#me">Me</a>
</li>
<li class="right-li">
<a href="#about">About</a>
</li>
</ul>
</div>
</header>
<body>
<!-- page content -->
</body>
</html>
li {
display: inline;
float: left;
}
li a {
width: 80px;
height: match-parent;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 24px;
text-decoration: none;
padding-bottom: 8px;
padding-top: 8px;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
li a:hover {
background: #1075e9;
/*border-radius: 50px;*/
border-color: #1075e9;
transition: all .4s ease 0s;
}
li a:active{
background-color: #07274d;
border-color: #07274d;
transition: 0s;
}
.right-li{
float: right !important;
}
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
#banner-img{
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover{
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active{
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
5 Réponses :
Utilisez Hauteur pour li à 100% et supprimez le rembourrage supérieur et inférieur de a. Utilisez la hauteur de ligne pour aligner verticalement le texte.
li {
display: inline;
height:100%;/* made the height to be the same as the parent's height */
float: left;
}
li a {
line-height:110px; /* line height should be the same as the element's height*/
width: 80px;
height: 100%;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 0 24px; /* removed the padding from top and bottom to prevent the a element overflowing*/
text-decoration: none;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
MODIFIER. Oh et si vous utilisez Chrome, Firefox, ils ont des outils de développement que vous pouvez utiliser pour voir les éléments à modifier.
Vous pouvez utiliser display: flex; et flex-grow: 1; pour obtenir le contenu à droite. Beaucoup plus propre que d'utiliser floats.
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li class="logo">
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
<a href="#me">Me</a>
</li>
<li class="right-li">
<a href="#about">About</a>
</li>
</ul>
</div>
</header>
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
display: flex;
}
.logo {
flex-grow: 1;
}
li a {
width: 80px;
height: match-parent;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 24px;
text-decoration: none;
padding-bottom: 8px;
padding-top: 8px;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
#banner-img {
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover {
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active {
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
changez la hauteur de la barre de navigation
.right-li {
float: right !important;
height: 104px;
}
ou si vous souhaitez conserver la même taille de la barre de navigation et
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
Ajouter une hauteur de ligne pour les éléments d'ancrage
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
<meta charset="utf-8">
<title>Test page</title>
<script src="script.js"></script>
</head>
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li>
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
<a href="#me">Me</a>
</li>
<li class="right-li">
<a href="#about">About</a>
</li>
</ul>
</div>
</header>
<body>
<!-- page content -->
</body>
</html>
li {
display: inline;
float: left;
height: 100%;
}
li a {
width: 80px;
line-height: 4.2;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 24px;
text-decoration: none;
padding-bottom: 8px;
padding-top: 8px;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
li a:hover {
background: #1075e9;
/*border-radius: 50px;*/
border-color: #1075e9;
transition: all .4s ease 0s;
}
li a:active{
background-color: #07274d;
border-color: #07274d;
transition: 0s;
}
.right-li{
float: right !important;
}
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
#banner-img{
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover{
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active{
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
Voici votre solution
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
<meta charset="utf-8">
<title>Test page</title>
<script src="script.js"></script>
</head>
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li>
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
<a href="#me">Me</a>
</li>
<li class="right-li">
<a href="#about">About</a>
</li>
</ul>
</div>
</header>
<body>
<!-- page content -->
</body>
</html>
li {
display: inline;
float: left;
height: 100%;
}
li a {
line-height:110px; /* line height should be the same as the element's height*/
width: 80px;
height: 100%;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 0 24px; /* removed the padding from top and bottom to prevent the a element overflowing*/
text-decoration: none;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
li a:hover {
background: #1075e9;
/*border-radius: 50px;*/
border-color: #1075e9;
transition: all .4s ease 0s;
}
li a:active{
background-color: #07274d;
border-color: #07274d;
transition: 0s;
}
.right-li{
float: right !important;
}
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
#banner-img{
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover{
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active{
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
Voir le code Ici, vous pouvez également modifier Voir le code
p >