HTML Element Style How to - Spread horizontal resizable menu ul li on full width of the display

Question

We would like to know how to spread horizontal resizable menu ul li on full width of the display.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--from   ww  w  .ja  v a2s. com-->
  width: 100%;
  height: 3%;
  background: red;
}

ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

ul li {
  background-color: yellow;
  display: inline;
  text-align: center;
  width: 30%;
}
</style>
</head>
<body>
  <div>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
    </ul>
  </div>
</body>
</html>

The code above is rendered as follows: