横スクロールが発生するサンプル

<div id="content">
  <ul>
    <li>sample1</li>
    <li>sample2</li>
    <li>sample3</li>
    <li>sample4</li>
  </ul>
</div>

#content {
  width: 800px;
  height: 400px;
  margin: auto;
  border: 1px solid #CCC;
  background: #EEE
}
#content > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#content > ul > li {
  width: 150%;
  float: left;
  text-align: center;
}

元記事を表示する