For tablet and desktop devices, you’ll lay out the horizontal navigation list as a single row...

For tablet and desktop devices, you’ll lay out the horizontal navigation list as a single row of links. Within the media query, create a style rule that displays the ul element within the horizontal navigation list as a flexbox, oriented in the row direction with no wrapping. Set the height of the element to 40 pixels For each li element within the ul element of the horizontal navigation list set their growth, shrink, and basis size values to 1, 1, and auto respectively so that each list items grows and shrinks at the same rate.

Solutions

Expert Solution

<!DOCTYPE html>
<html>
<head>
<style>

ul {

   margin:0;
paddilng:0;
   list-style-type: none;
overflow: hidden;
background-color: black;
}
li {

float: left;

}
li a {

display: block;
   color: white;
text-align: center;
   text-decoration: none;
padding: 14px 16px;

}
li a:hover {
background-color: #3B2327;
}

@media only screen and (max-width: 768px){
   .nav{
   display: flex;
flex-direction: row;
height: 40px;
flex-wrap: nowrap;
align-items: center;


flex-basis: Auto;
}
.nav li{
   flex-grow: 1;
flex-shrink: 1;
    flex-basis: Auto;
}

ul {

   margin:0;
paddilng:0;
   list-style-type: none;

background-color: black;
}
li {



}
li a {


   color: white;
text-align: center;
   text-decoration: none;
padding: 14px 16px;

}
li a:hover {
background-color: #3B2327;
}

}

</style>
</head>
<body>

<ul class="nav">
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="Contact">Contact</a></li>
</ul>
<br>
<h1>Flex-Properties</h1>

</body>
</html>

venereology answered 3 months ago

Next > < Previous

Question

For tablet and desktop devices, you’ll lay out the horizontal navigation list as a single row...

Solutions

Expert Solution

Related Solutions