css - UL 水平滚动

Question

我试图在我的一系列无序列表上获得一个水平滚动条，但我终究做不到……我觉得我将 UL 包裹在一个具有正确溢出设置的 div 中。

#pricing-table {
  margin: 100px auto;
  text-align: center;
  width: 800px; /* total computed width = 222 x 3 + 226 */*/
  height: 800px;
  overflow-x: scroll;
  overflow-y: hidden;
}

#pricing-table .plan {
  font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
  text-shadow: 0 1px rgba(255,255,255,.8);        
  background: #fff;      
  border: 1px solid #ddd;
  color: #333;
  padding: 20px;
  width: 250px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
  float: left;
  position: relative;
}

.clear:before, .clear:after {
  content:"";
  display:table
}

.clear:after {
  clear:both
}
  
.clear {
  zoom:1
}

<div id="pricing-table" class="clear">
  <div class="plan" id="most-popular">
<h3>Testing<span></span></h3>      
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>       
</ul> 
 </div>
<div class="plan">
<h3>Testing<span></span></h3>      
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>       
</ul> 
 </div>
   <div class="plan" id="most-popular">
<h3>Testing<span></span></h3>      
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>       
</ul> 
 </div>  
<div class="plan" id="most-popular">
<h3>Testing<span></span></h3>      
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>       
</ul> 
 </div>
  <div class="plan" id="most-popular">
<h3>Testing<span></span></h3>      
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>       
</ul> 
 </div>
 <div class="plan" id="most-popular">
<h3>Testing<span></span></h3>      
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>       
</ul> 
 </div>
</div>

有什么想法吗？

Answer 1

从子元素中移除 float。请改用 inline-block 并在父级上添加 white-space: nowrap。它将防止 child 包裹。

如果需要，以下 css 将创建水平滚动。

.parent {
  white-space: nowrap;
  overflow-x: scroll;
  width: 800px;
}
.child {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

#pricing-table {
  margin: 100px auto;
  text-align: center;
  width: 100%; /* total computed width = 222 x 3 + 226 */*/
  height: 800px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

#pricing-table .plan {
  font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
  text-shadow: 0 1px rgba(255,255,255,.8);        
  background: #fff;      
  border: 1px solid #ddd;
  color: #333;
  padding: 20px;
  width: 250px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
  position: relative;
  display: inline-block;
  vertical-align: top;
  white-space: normal;
}
.clear:before, .clear:after {
  content:"";
  display:table
}

.clear:after {
  clear:both
}

.clear {
  zoom:1
}

<div id="pricing-table" class="clear">
  <div class="plan" id="most-popular">
    <h3>Testing<span></span></h3>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul> 
  </div>
  <div class="plan">
    <h3>Testing<span></span></h3>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul> 
  </div>
  <div class="plan">
    <h3>Testing<span></span></h3>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul> 
  </div>
  <div class="plan">
    <h3>Testing<span></span></h3>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul> 
  </div>
  <div class="plan">
    <h3>Testing<span></span></h3>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul> 
  </div>
  <div class="plan">
    <h3>Testing<span></span></h3>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul> 
  </div>
</div>