'Where do I change the width from my ul li

My website looks like the screenshot and I want to change this width from the border so the <a> Co2 Scan... fits in one line!

.wrapper ul li{
  height: 10%;
  margin: 10px 0;
}
.wrapper ul li a{
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 5px 50px;
  color: #fff;
  border-radius: 0px;
  position: absolute;
  line-height: 50px;
  margin: 5px 30px;
  opacity: 0;
  transition: all 0.3s ease;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
<body>
  <input type="checkbox" id="active">
  <label for="active" class="menu-btn"><span></span></label>
  <label for="active" class="close"></label>
  <div class="wrapper">
    <ul>
      <li><a href="#">CO2 Scan</a></li>
      <li><a href="#">Infos</a></li>
      <li><a href="#">Rezepte</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Feedback</a></li>
    </ul>
  </div>
</body>
htmlcssweb


Solution 1:[1]

You can try adding white-space: nowrap; for the <a> tag:

.wrapper ul li a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 5px 50px;
  color: #fff;
  border-radius: 0px;
  position: absolute;
  line-height: 50px;
  margin: 5px 30px;
  opacity: 0;
  transition: all 0.3s ease;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  white-space: nowrap;
}


.wrapper ul li {
  height: 10%;
  margin: 10px 0;
}

.wrapper ul li a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 5px 50px;
  color: #fff;
  border-radius: 0px;
  position: absolute;
  line-height: 50px;
  margin: 5px 30px;
  opacity: 0;
  transition: all 0.3s ease;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  white-space: nowrap;
}
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><span></span></label>
<label for="active" class="close"></label>
<div class="wrapper">
  <ul>
    <li><a href="#">CO2 Scan</a></li>
    <li><a href="#">Infos</a></li>
    <li><a href="#">Rezepte</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Feedback</a></li>
  </ul>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Praveen Kumar Purushothaman

Related Questions