duy trì chiều rộng của span ngay cả khi không có gì trong nó

Question

Có thể duy trì chiều rộng của một khoảng cách nào đó nếu nó trống không?

Tôi có bảng sau HTML giả:

<p><span class="col1">Day:</span><span class="col2"><?php echo somephp ?></span></p> 
<p><span class="col1">Time:</span><span class="col2"><?php echo somephp ?></span></p> 
<p><span class="col1">Class:</span><span class="col2"><?php echo somephp ?></span></p> 
<p><span class="col1">Teacher:</span><span class="col2"><?php echo somephp ?></span></p> 

Với CSS:

span.col1 {width: 100px;float: left;} 
span.col2 {width: 100px;} 

Đôi khi PHP được lặp lại trong col2 rỗng và khi điều này xảy ra chiều rộng col2 là 0 và col1 trên đoạn dưới nó kết thúc xếp chồng lên cạnh col1 trong đoạn trên.

Answer 1

Các chiều dài col2 của bạn bỏ qua chiều rộng vì chúng là các phần tử nội dòng. Bạn cần phải biến chúng thành các phần tử chặn nội tuyến.

span.col2 { width: 100px; display: inline-block } 

Cũng nên nhớ rằng bạn có thể cần phải thêm một chiều cao để nó tùy thuộc vào nơi nó được hiển thị, hoặc bạn sẽ kết thúc với một khoảng 100px rộng nhưng 0px cao.

Answer 2

Theo phần tử span mặc định là phần tử nội tuyến và nó bỏ qua chiều rộng.

Thử thêm hiển thị: chặn vào các nhịp của bạn.

span.col1 {width: 100px;float: left; display:block;} 
span.col2 {width: 100px; display:block;} 

Hy vọng điều đó sẽ hữu ích.

Answer 3

Theo mặc định span hiển thị dưới dạng nội dòng.

Vì vậy, hãy thêm display:block để cung cấp cho nó một phần tử khối hoặc bổ sung bạn có thể sử dụng display:inline-block để giữ nội tuyến với phần còn lại của văn bản (không sử dụng float).