xóa khoảng cách giữa đoạn và danh sách không có thứ tự

Question

<p>Text</p> 
<ul> 
    <li>One</li> 
</ul> 
<p>Text 2</p> 

Làm cách nào để xóa không gian dọc giữa đoạn và danh sách.

Để cụ thể hơn - làm cách nào để giảm lề/phần dưới cùng của thẻ p CHỈ khi được theo sau bởi danh sách không theo thứ tự. Tất cả các câu trả lời tôi thấy ở đây sẽ xóa không gian sau tất cả các thẻ p - đó không phải là những gì được hỏi.

Answer 1

Bạn có thể sử dụng bộ chọn CSS trong một cách tương tự như sau:

p + ul { 
    margin-top: -10px; 
} 

Điều này có thể hữu ích vì p + ul phương tiện chọn bất kỳ yếu tố <ul> sau một yếu tố <p>.

Thông thường, bạn sẽ phải điều chỉnh mức độ chênh lệch hoặc số tiền bạn có trên các thẻ <p> của mình.

Original câu trả lời cho câu hỏi ban đầu:

p, ul { 
    padding: 0; 
    margin: 0; 
} 

đó sẽ đưa bất kỳ khoảng trắng EXTRA đi.

p, ul { 
    display: inline; 
} 

Điều đó sẽ làm cho tất cả các yếu tố nội tuyến thay vì chặn. (Ví dụ: <p> sẽ không gây ra ngắt dòng trước và sau đó.)

Answer 2

p, ul{ 
    padding:0; 
    margin:0; 
} 

Nếu đó không phải là những gì bạn đang tìm kiếm bạn sẽ phải cụ thể hơn

Answer 3

Bạn có thể (A) thay đổi đánh dấu để không sử dụng đoạn

<span>Text</span> 
<br> 
<ul> 
    <li>One</li> 
</ul> 
<span>Text 2</span> 

Hoặc (B) thay đổi css

p{margin:0px;} 

Demo đây: http://jsfiddle.net/ZnpVu/1

.210

Answer 4

Mỗi trình duyệt có một số kiểu mặc định áp dụng cho một số thành phần HTML, thích p và ul. Không gian bạn đề cập có thể được tạo do lề và đệm mặc định của trình duyệt của bạn. Bạn có thể thiết lập lại các mặc dù:

p { margin: 0; padding: 0; } 
ul { margin: 0; padding: 0; } 

Bạn cũng có thể đặt lại tất cả lề mặc định và miếng đệm:

* { margin: 0; padding: 0; } 

tôi đề nghị bạn hãy xem normalize.css: http://necolas.github.com/normalize.css/

Answer 5

tôi đã kết thúc bằng một danh sách định nghĩa với một danh sách không có thứ tự bên trong nó. Nó giải quyết vấn đề của không gian không mong muốn trên danh sách mà không cần phải thay đổi mỗi thẻ đoạn.

<dl><dt>Text</dt> 
<dd><ul><li>First item</li> 
<li>Second item</li></ul></dd></dl> 

Answer 6

Một cách là sử dụng bộ chọn tức thời và lề âm. Quy tắc này sẽ chọn một danh sách ngay sau một đoạn văn, do đó, nó chỉ thiết lập một margin-top phủ định.

p + ul { 
    margin-top: -XX; 
} 

Answer 7

tôi nhận kết quả khá tốt với mailing list HTML của tôi bằng cách sử dụng như sau:

p { margin-bottom: 0; } 
ul { margin-top: 0; } 

này không đặt lại tất cả các giá trị lợi nhuận nhưng chỉ những người tạo ra một khoảng cách như vậy trước khi ra lệnh danh sách, và vẫn còn không giả định bất cứ điều gì về giá trị margin mặc định.

Answer 8

cách đơn giản này làm việc tốt cho tôi:

<ul style="margin-top:-30px;">