Đường viền HTML không có cùng độ dài

Question

Tôi có danh sách các tiệm này và mỗi danh sách đều có đường viền chấm chấm ở phía bên tay phải. Một số biên giới này dừng lại trước những người khác, có cách nào để làm cho chúng có cùng độ dài không? (Lý tưởng để họ đạt được chân trang) Tất cả các tiệm đang trong HTML này (thông tin chỉ là khác nhau):

<div class="salons"> 
    <h1><a href="salonpage.php?salonid=1">Urban Bliss</a></h1> 
    <p> 15 Headingly Lane, 
    LS6 1BL. 
    0113 278 1572</p> 
</div> 

và CSS như sau:

.salons { 
font-family:"Century Gothic"; 
width:248.5px; 
max-height:inherit; 
float:left; 
padding-left:5px; 
border-right:1px dotted #FFB6D7; 
padding-bottom:5px; 
} 

Answer 1

Các lý do điều này đang xảy ra là bởi vì một số chiều cao hộp là ít hơn cao nhất. Để khắc phục điều này, chỉ cần thêm chiều cao cố định vào tất cả các div trong css. Ví dụ:

height:200px; 

Answer 2

Okay bạn cần phải cung cấp cho nó là mẹ một kích thước cố định, trong những lâu nhất một, và sau đó thêm height: 100%; cho trẻ em.

.parent { 
    width: 100%; 
    height: 190px; 
} 

.salons{ 
    font-family:"Century Gothic"; 
    width:248.5px; 
    height:100%; 
    float:left; /* the reason the parent needs a fixed height is due to the float */ 
    padding-left:5px; 
    border-right:1px dotted #FFB6D7; 
    padding-bottom:5px; 
} 

JSFIDDLE

Answer 3

Đó là Bởi vì họ có khác nhau height (dựa trên nội dung của nó) ...
Bạn có thể cố gắng đưa ra một chiều cao cố định vào .salonsclass
hoặc ...
100 % và chiều cao cố định cho vùng chứa.

Answer 4

Bạn cần phải đặt height, min-height và max-height

.salons { 
    /* other style */ 
    height: 200px; 
    min-height: 200px; 
    max-height: 200px; 
} 

Answer 5

Bạn không hề cần phải sửa chữa bất kỳ chiều cao Tôi nghĩ rằng chỉ cần đảm phụ huynh display:table; và làm cho các salon đẳng cấp display:table-cell;

Để kiểm tra như thế nào công việc này thử thử HTML và CSS dưới đây cho trước

HTML

<ul> 
    <li>1</li> 
    <li>2<br />2</li> 
    <li>1</li> 
    <li>1</li> 
</ul> 

CSS

ul { display:table; list-style:none; } 
ul li { display:table-cell; padding:10px; border-right:1px solid red }