Tôi có chiều rộng cố định DIV chứa bảng có nhiều cột và cần cho phép người dùng cuộn bảng theo chiều ngang trong DIV.Div với cuộn ngang chỉ
Tính năng này chỉ hoạt động trên IE6 và IE7 (ứng dụng khách nội bộ).
Các công trình sau đây trong IE7:
overflow-x: scroll;
bất cứ ai có thể giúp đỡ với một giải pháp mà làm việc trong IE6 cũng?
Giải pháp khá thẳng về phía trước. Để đảm bảo rằng chúng tôi không tác động đến chiều rộng của các ô trong bảng, chúng tôi sẽ tắt khoảng trắng. Để đảm bảo chúng tôi có thanh cuộn ngang, chúng tôi sẽ bật tràn-x. Và đó là khá nhiều:
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
Bạn có thể xem the end-result here hoặc trong hình động bên dưới. Nếu bảng xác định chiều cao của vùng chứa, bạn không cần đặt rõ ràng overflow-y thành hidden. Nhưng hiểu rằng đó cũng là một lựa chọn.
Tôi đã bỏ lỡ 'không gian trắng: bừa bãi;'. Làm việc như một say mê! – AndreFeijo
Nếu một bức tranh trị giá một ngàn chữ, một gif trị giá một triệu. – HoldOffHunger
overflow-x: scroll;
overflow-y: hidden;
EDIT:
Nó làm việc cho tôi:
<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
<div style='width:400px;height:250px'></div>
</div>
tôi có thể không nhận được câu trả lời được lựa chọn để làm việc nhưng sau một chút research, tôi thấy rằng div cuộn ngang phải có white-space: nowrap trong css.
Đây là mã làm việc hoàn chỉnh:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly{
width: 1000px;
height: 190px;
overflow: auto;
overflow-y: hidden;
margin: 0 auto;
white-space: nowrap
}
img{
width: 300px;
height: 150px;
margin: 20px 10px;
display: inline;
}
</style>
</head>
<body>
<div id='scrolly'>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
</div>
</body>
</html>
câu trả lời hay nhất ở đây 'white-space: nowrap' thanks! – oak
Đề xuất "không gian trắng: bẻ khóa" ở đây dường như đã được pha trộn vào câu trả lời chính xác. 1 để cải thiện câu trả lời được chấp nhận. – HoldOffHunger
cho cuộn ngang giữ hai thuộc tính này trong tâm trí:
overflow-x:scroll;
white-space: nowrap;
Xem liên kết làm việc: click me
HTML
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
CSS
div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
Thuộc tính tràn-x sẽ hoạt động tốt trong IE6; bạn có thể có các yếu tố phức tạp. Bạn có thể đăng một trường hợp thử nghiệm trưng bày vấn đề không? –
Có vẻ như vấn đề của tôi ở nơi khác - DIV chứa của tôi đang tràn vào vùng chứa của nó. –