Very extensive words are outside the li

Navigation
1

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

/* ------- */

/* 1.0 - Menu de navegación */

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

#menu li{
  float: left;
  width: 20%;
}
#menu li:first-child a{
  background-color:gray;
}
#menu li a{
  background-color: black;
  color: white;
  display: block;
  padding: 16px 16px 16px 16px;
  text-align:center;
  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>

If you notice, the word computation only remains in "computacio" , what is the error? , I am learning css3 recently and I am learning, but I placed the text of <a> (which are within the <li> ), with display:block (so that it behaves as a block) and with the text centered , then why is it not seen?

    
asked by Eduardo Sebastian 04.09.2017 в 18:54
source

3 answers

1

Reading through the comments, I see that you want the menu to occupy 100% of the screen.

To do this, you can add the width: 100% property to the menu so that it occupies 100% of the width of the screen.

Afterwards, so that the texts are not cut if they are longer you should use min-width instead of width . In this way, at least, each cell will occupy 20% of the total but, in case the text needs more space, that cell will take the corresponding space (you only indicate the minimum space that each cell will take, but not the maximum for that can be expanded as appropriate).

Your modified example: 

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

/* ------- */

/* 1.0 - Menu de navegación */

#menu{
  width: 100%;
  list-style-type:none;
  margin:0;
  padding:0;
  top:0;
  position: fixed;
}

#menu li{
  float: left;
  min-width: 20%;
}
#menu li:first-child a{
  background-color:gray;
}
#menu li a{
  background-color: black;
  color: white;
  display: block;
  padding: 16px 16px 16px 16px;
  text-align:center;
  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>
    
answered by 04.09.2017 / 21:45
source
1

Simply change the width: 20%; property in your #menu li{} to width: auto; 

body {
  background-color: #000000;
}

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

#menu li {
  float: left;
  width: auto;
}

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

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

#menu li a:hover {
  background-color: gray;
}
href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
<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 в 19:04
0

The problem is that you are giving it a fixed width, if you want it to adapt to the content use display: inline-block, without widh; but with: auto

    
answered by 04.09.2017 в 21:25
Validations in Class Based View ... form_valid or form_invalid I have a doubt that in the airplane class create an arrangement that has maximum capacity passengers being different classes [closed]