CSS Property Value How to - overflow-x: scroll; Display blocks in line with scroll








Question

We would like to know how to overflow-x: scroll; Display blocks in line with scroll.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.container {<!--   ww  w .j a  v a  2s . c  o  m-->
  width: 200px;
  background-color: red;
  overflow-x: scroll;
  white-space: nowrap;
}

.content ul {
  padding: 0px;
  margin: 0px;
}

.item {
  padding: 1px 10px 1px 10px;
  background-color: green;
  border: 1px black solid;
  margin: 1px;
  display: inline-block;
}
</style>
</head>
<body>
  <div class="container">
    <div class="content">
      <ul>
        <li class="item">a</li>
        <li class="item">bb</li>
        <li class="item">ccc</li>
        <li class="item">dddd</li>
        <li class="item">eeeee</li>
      </ul>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: