Làm thế nào để làm cho một div không có nội dung có chiều rộng?

110

Tôi đang cố gắng thêm chiều rộng vào a div, nhưng dường như tôi đang gặp sự cố vì nó không có nội dung.

Đây là CSS và HTML mà tôi có cho đến nay, nhưng nó không hoạt động:

CSS

body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}

HTML

<body>
  <div id="test">
    <ul>
      <li>
        <div class="test1">width1</div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
    </ul>
 </div>

— runeveryday
nguồn

158

một div thường cần ít nhất một khoảng trắng không ngắt (& nbsp;) để có chiều rộng.

— jcomeau_ictx
nguồn

28

sử dụng "display: inline-block"

— Luccas

giải pháp tốt, nếu tôi sử dụng "" thay vì & nbsp; nó không hoạt động. nhưng tại sao?

— Amitābha

1

'& nbsp;' là một kỹ thuật tốt trái ngược với chiều cao tối thiểu vì nó không ép buộc chiều cao. Giả sử kích thước phông chữ của bạn được đặt thành 16px và phần đệm của bạn là 15px. Div của bạn sẽ giữ lại cùng một chiều cao trước và sau khi văn bản được thêm vào div (giả sử đó là tất cả trên cùng một dòng)

— eroedig

đối với tôi, đặt một khoảng trắng không hoạt động! div có chiều rộng 100px và nằm trong & nbsp; không giống như là 100px trong một div với các yếu tố inline flex

— Micky

89

Hoặc sử dụng padding, heighthoặc &nbsp cho chiều rộng có hiệu lực với trốngdiv

BIÊN TẬP:

Non zero min-heightcũng hoạt động tốt

— ArK
nguồn

5

Tôi thích giải pháp đệm hơn, bất kỳ khoảng đệm nào lớn hơn 0 sẽ hoạt động. Bằng cách đó, bạn không có một cái lạ, có thể lựa chọn  trong div.

— Brian Duncan

1

Xin lưu ý: đối với giải pháp đệm, bạn cần cung cấp cả đệm trái / phải và trên / dưới để nó hoạt động.

— Govind Rai

62

Sử dụng min-height: 1px; Mọi thứ có chiều cao tối thiểu là 1px để không chiếm thêm không gian với nbsp hoặc padding, hoặc bị buộc phải biết chiều cao trước.

— riley
nguồn

2

Giải pháp của bạn có vẻ rõ ràng nhất đối với tôi, nhưng tôi đã cố gắng tìm lý do cho điều này trong thông số kỹ thuật CSS và tôi không thể tìm thấy nó ở bất kỳ đâu, nơi tôi tìm thấy gần nhất là ở CSS 2.1, 9.5 Floatsnơi nó nói Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., nhưng nó nói về hộp dòng tức là dòng trong một đoạn văn, nhưng không về các hộp liền kề. Có ai quen thuộc với thông số CSS không?

— Jaime Hablutzel

Điều này làm việc tốt nhất cho tôi. Tôi đã thử hầu hết các đề xuất khác ở đây ngoại trừ & nbsp ;.

— ayahuasca,

28

Sử dụng CSS để thêm khoảng trắng 0-width vào div của bạn. Nội dung của div sẽ không chiếm chỗ nhưng sẽ buộc div hiển thị

.test1::before{
   content: "\200B";
}

— BernardV
nguồn

9

Nó có chiều rộng nhưng không có nội dung hoặc chiều cao. Thêm thuộc tính chiều cao vào lớp test1.

— Michael
nguồn

7

Có các phương pháp khác nhau để làm cho DIV trống có float: lefthoặc float: righthiển thị.

Ở đây trình bày những cái tôi biết:

đặt width(hoặc min-width) với height(hoặc min-height)
hoặc thiết lập padding-top
hoặc thiết lập padding-bottom
hoặc thiết lập border-top
hoặc thiết lập border-bottom
hoặc sử dụng phần tử giả : ::beforehoặc ::aftervới:
- {content: "\200B";}
- hoặc là {content: "."; visibility: hidden;}
hoặc đặt  bên trong DIV (điều này đôi khi có thể mang lại hiệu quả bất ngờ, ví dụ như kết hợp với text-decoration: underline;)

— simhumileco
nguồn

1

Cố gắng thêm display:block;vào bài kiểm tra của bạn1

— DevenX
nguồn

1

Quá muộn để trả lời, nhưng tuy nhiên.

Trong khi sử dụng CSS, để tạo kiểu cho div (content-less), thuộc tính min-height phải được đặt thành "n" px để hiển thị div (hoạt động với webkit và chrome, trong khi không chắc liệu thủ thuật này có hoạt động trên IE6 hay không và thấp hơn)

Mã:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}

<div class="shape-round"></div>

Mở rộng đoạn mã

— Bhaskar Pramanik
nguồn

0

 có thể làm các thủ thuật; hoạt động trong tài liệu XSL

— Daniel Forrest
nguồn

0

Tôi gặp vấn đề tương tự. Tôi muốn các biểu tượng xuất hiện bằng cách nhấn nút nhưng không có bất kỳ chuyển động nào và trượt môi trường, giống như bóng đèn: bật và tắt, xuất hiện và biến mất, vì vậy tôi cần tạo một div trống với kích thước cố định.

width: 13px;
min-width: 13px;

đã lừa tôi

— cái chết
nguồn

-1

Bạn thêm CSS của DIV này position: relative, nó sẽ thực hiện tất cả công việc.

— Krzysztof AN
nguồn