Question

我正在尝试在我的一系列无序列表上获得一个水平滚动条，并且不能用于我的生活...我觉得我将UL包装在具有正确溢出设置的div中。

Geocoder geocoder;
List<Address> addresses;
geocoder = new Geocoder(this, Locale.getDefault());

addresses = geocoder.getFromLocation(latitude, longitude, 1); 
String address = addresses.get(0).getAddressLine(0); 
String city = addresses.get(0).getLocality();
String state = addresses.get(0).getAdminArea();
String country = addresses.get(0).getCountryName();
String postal_Code = addresses.get(0).getPostalCode();
String Name = addresses.get(0).getFeatureName();

#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
}

任何想法？

Answer 1

从子元素中删除float。请改用inline-block并在父级上添加white-space: nowrap。它会阻止儿童包裹。

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

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

＆＃13;

#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
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以将display: flex添加到ID #pricing-table，将min-width: 250px添加到班级.plan

检查更新的CSS块：

#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;
display: flex;
}

#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;
min-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
   }

UL上的水平滚动

2 个答案: