Phần tử div CSS - làm thế nào để chỉ hiển thị các thanh cuộn ngang?

Tôi có một container div và đã xác định phong cách của nó như sau:

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

Điều này tự động cung cấp cho tôi cả thanh cuộn ngang và dọc khi tôi điền vào bảng được chứa bởi div này. Tôi chỉ muốn các thanh cuộn ngang xuất hiện tự động. Tôi sẽ sửa đổi chiều cao của bảng theo chương trình.

Làm thế nào để tôi làm điều này?

Bạn không nên lấy cả thanh cuộn ngang và dọc trừ khi bạn làm cho nội dung đủ lớn để yêu cầu chúng.

Tuy nhiên, bạn thường làm trong IE do một lỗi. Kiểm tra các trình duyệt khác (Firefox, v.v.) để tìm hiểu xem trên thực tế chỉ có IE đang làm việc đó.

IE6-7 (trong số các trình duyệt khác) hỗ trợ tiện ích mở rộng CSS3 được đề xuất để đặt thanh cuộn độc lập, bạn có thể sử dụng để chặn thanh cuộn dọc:

overflow: auto;
overflow-y: hidden;

Bạn cũng có thể cần thêm cho IE8:

-ms-overflow-y: hidden;

vì Microsoft đang đe dọa sẽ chuyển tất cả các thuộc tính tiêu chuẩn trước CR vào hộp '-ms' của riêng họ trong Chế độ tiêu chuẩn IE8. (Điều này sẽ có ý nghĩa nếu họ luôn làm theo cách đó, nhưng thay vào đó là một sự bất tiện cho mọi người.)

Mặt khác, IE8 hoàn toàn có thể đã sửa lỗi.

Tôi cũng đã phải thêm white-space: nowrap;vào phong cách, nếu không các yếu tố sẽ bao bọc vào khu vực mà chúng tôi đang loại bỏ khả năng cuộn đến.

Giải pháp này không có thông số chiều cao / chiều rộng cho div cha nên nó sẽ đáp ứng với thay đổi kích thước cửa sổ và hữu ích nhất là thanh cuộn ngang xuất hiện ngay khi cần.

.container{
    padding:20px;
    border:dotted 1px;
    white-space:nowrap;
    overflow-x:auto;
}

.box{
    width:100px;
    height:180px;
    background-color: red;
    margin:10px;
    display:inline-block
}

Hãy xem DEMO

Để hiển thị cả hai:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

Ẩn trục X:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

Ẩn trục Y:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

bạn cũng có thể tạo nó overflow: autovà cho chiều cao và chiều rộng cố định tối đa theo cách đó, khi văn bản hoặc bất cứ thứ gì ở đó, tràn ra nó sẽ chỉ hiển thị thanh cuộn cần thiết

Tôi sử dụng các thuộc tính CSS: 1) " overflow-x: auto"; 2) " overflow-y: hidden"; 3) " white-space: nowrap";

Đừng quên đặt Độ rộng cho cả bộ chứa và các thành phần DIVS bên trong. Thuộc tính "khoảng trắng: nowrap" cho phép DIVS bên trong không rơi trên một dòng khác.

Xem xét HTML sau:

<div class="container"> 
  <div class="inner-1"></div>
  <div class="inner-2"></div>
  <div class="inner-3"></div>
</div>

Tôi sử dụng CSS sau để chỉ cuộn ngang:

.container {
  height: 80px;
  width: 600px;
  overflow-x: auto;
  overflow-y: hidden; 
  white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
  height: 60px;
  max-width: 250px;
 display: inline-block; /* this should fix it */
}

Fiddle: https://jsfiddle.net/qrjh93x8/ (không hoạt động với mã trên)

Sử dụng như sau

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px;  border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none;  width:140px; }

CSS3 có thuộc overflow-xtính, nhưng tôi không mong đợi sự hỗ trợ tuyệt vời cho điều đó. Trong CSS2, tất cả những gì bạn có thể làm là thiết lập một scrollchính sách chung và thực hiện theo cách của bạn widthsvà heightskhông làm rối chúng.

Chúng ta nên đặt overflow: autovà ẩn một thanh cuộn mà chúng ta không sử dụng để làm việc trên trình duyệt CSS3 không hỗ trợ. Nhìn vào CSS tràn này; XME.im