How to make a li

Navigation
0

/* General */
body{
  background-color: #000000;
}

/* ------- */

/* 1.0 - Menu de navegación */

#menu{
  list-style-type:none;
  margin:0;
  padding:0;
}
#menu li{
  float: left;
}
#menu li:first-child > a{
  background-color:gray;
}
#menu li a{
  background-color: black;
  color: white;
  padding: 16px 16px 16px 16px;
  display:block;
  font-family: monospace;
  text-decoration:none;
  border-bottom: 2px solid white;
}
#menu li a:hover{
  background-color:gray;
}
/* ------------------------- */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Astro cosmos</title>
  <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
  </head>
<body>
  <ul id="menu">
    <li><a href="home.html">Inicio</a></li>
    <li><a href="maths.html">Matemáticas</a></li>
    <li><a href="physics.html">Física</a></li>
    <li><a href="computacion.html">Computación</a></li>
    <li><a href="others.html">Otros</a></li>
  </ul>
</body>
</html>

How could I make the horizontal size of the menu be the size of the body, that is, adaptable to any window. Only with CSS

    
asked by Eduardo Sebastian 04.09.2017 в 18:33
source

3 answers

1

You can use calc () to calculate the width of the element li < em> on the fly : 

#menu li {
  float: left;  
  text-align: center;
  width: calc(100% / 5); /* Cantidad de elementos li */
}


body{  
  background-color: #000000;
}

#menu li {
  float: left;  
  text-align: center;
  width: calc(100% / 5); /* Cantidad de elementos li */
}

#menu {
  list-style-type:none;
  margin:0;
  padding:0; 
}

#menu li:first-child > a{
  background-color:gray;
}

#menu li a{
  background-color: black;
  color: white;
  padding: 16px 16px 16px 16px;
  display:block;
  font-family: monospace;
  text-decoration:none;
  border-bottom: 2px solid white;
}

#menu li a:hover{
  background-color:gray;
}
<ul id="menu">
  <li><a href="home.html">Inicio</a></li>
  <li><a href="maths.html">Matemáticas</a></li>
  <li><a href="physics.html">Física</a></li>
  <li><a href="computacion.html">Computación</a></li>
  <li><a href="others.html">Otros</a></li>
</ul>
    
answered by 04.09.2017 / 18:56
source
1

/* General */
body{
  background-color: #000000;
}

/* ------- */

/* 1.0 - Menu de navegación */

#menu{
  list-style-type:none;
  margin:0;
  padding:0;
  text-align: center;
}
#menu li{
  float: left;
  width: 20%;
}
#menu li:first-child > a{
  background-color:gray;
}
#menu li a{
  background-color: black;
  color: white;
  padding: 16px 16px 16px 16px;
  display:block;
  font-family: monospace;
  text-decoration:none;
  border-bottom: 2px solid white;
}
#menu li a:hover{
  background-color:gray;
}
/* ------------------------- */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Astro cosmos</title>
  <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
  </head>
<body>
  <ul id="menu">
    <li><a href="home.html">Inicio</a></li>
    <li><a href="maths.html">Matemáticas</a></li>
    <li><a href="physics.html">Física</a></li>
    <li><a href="computacion.html">Computación</a></li>
    <li><a href="others.html">Otros</a></li>
  </ul>
</body>
</html>

I hope it will help if it is what you are looking for.

    
answered by 04.09.2017 в 18:44
1
#menu {
    margin: 0;
    padding: 0;
    font-size: 0;
    list-style: none;
    background-color: #000000;
    height: 100vh;
    width: 100%; // YOU NEED IT IN YOUR CODE
}
#menu li {
    display: inline-block;
    font-size: 0;
    text-align: center;  
    height: 100vh;
    width: 20%; // AND IT TOO :)
}
#menu li a {
    text-decoration: none;
    display: inline-block;
    padding: 15px;
    font-size: 15px;
    color: #FFFFFF; 
    font-family: monospace;
    width:16vw;
}

link

    
answered by 04.09.2017 в 20:14
Error when programming in android studio Checkbox with JQuery (select and deselect)