CSS: ẩn yếu tố nhưng giữ chiều rộng (và không phải chiều cao)

Question

• display:none sẽ hoàn toàn che giấu một yếu tố như thể nó bây giờ đã có một chiều rộng và chiều cao của zero
• visibility:hidden mặt khác sẽ giấu một yếu tố nhưng đặt hình chữ nhật chiều rộng và chiều cao ban đầu của phần tử trong tài liệu.

Có cách nào thông qua CSS tinh khiết, để ẩn phần tử sao cho nó chiếm không cao nhưng chiều rộng ban đầu của nó không? Đặt chiều cao của nó thành 0 không hoạt động bởi vì tôi không biết chiều cao nào để đặt thành phần một khi tôi muốn hiển thị lại nó.

Cụ thể: Tôi muốn đạt được như sau:

#top ul  {take up zero height but original width} 
#top:hover ul {restore original dimensions} 

Edit: giải quyết! Ý tưởng là đặt height:auto để khôi phục chiều cao ban đầu.

Xem ở đây http://jsfiddle.net/yP59s/ cho phiên bản đầy đủ hoặc ở đây css:

ul {margin:0px} 
#top {border:1px solid} 
#top ul {height:0px;overflow:hidden} 
#top:hover ul {height:auto;} 

và html:

<div id="top"> 
    <h1>foobar</h1> 
    <ul> 
     <li>foo</li> 
     <li>bar</li> 
    </ul> 
</div> 
blubber 

Answer 1

#top   { width: 300px; height:0px; max-height:0px; } 
#top:hover {height: auto; width: 300px; } 

http://jsfiddle.net/G5cgY/

Answer 2

sử dụng css

<a href="#box1">Show Box 1</a>|<a href="#box2">Show Box 2</a>|<a href="#hidebox">Hide All</a> 

<div id="box1" class="box"> Contents of Box 1 </div> 
<div id="box2" class="box"> Contents of Box 2 </div> 

và css

.box{ 
border: 2px solid #ccc; 
padding:20px; 
margin:20px 0 0; 
max-height:150px; 
max-width:300px; 
display:none; } 



.box:target{ 
    display:block; 
} 

và tôi tìm thấy fiddle này khá một vài tháng trở lại, có thể hữu ích: http://jsfiddle.net/DbXQs/