Tại sao các div này không được căn chỉnh theo chiều ngang? Tại sao họ ngắt dòng?

Question

HTML này:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
</div>

Tại sao các divs màu đỏ không phải ở hàng ngang cùng và làm thế nào để có được chúng trong cùng hàng?

Answer 1

Ok, do đó divs là những yếu tố khối và đôi khi tôi sử dụng div để chứa các menu. Vì vậy, bạn có thể thêm thuộc tính kiểu được gọi là display: inline-block vào các div bên trong và nếu bạn muốn các div đó được căn giữa bên trong div vùng chứa, bạn có thể sử dụng text-align: center. Nó sẽ hoạt động trên tất cả các loại phần tử khối.

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
</div>

Answer 2

Đây là hành vi mặc định của div s và tất cả các phần tử khối khác. Để thay đổi, bạn phải đặt display thành inline-block hoặc float đến left hoặc right. (Thiết lập float: left; sẽ biện minh cho các yếu tố chống lại phía bên trái của vùng chứa của chúng và float: right; sẽ biện minh cho chúng ở bên phải.) Tôi khuyên bạn nên thực hành với inline-block. Nó thường là một giải pháp tốt hơn vì nó để lại các phần tử trong luồng thông thường của tài liệu thay vì loại bỏ chúng khỏi sự tương tác với các phần tử lân cận, như float.

Answer 3

Đây là những gì bạn đang tìm kiếm:

<style type="text/css"> 
    div.littleDiv { 
     display: inline-block; 
     border:1px 
     solid red; 
     height:50px; 
     width:80px; 
    } 
</style> 
<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
</div> 

này đã có thể cho một thời gian dài sử dụng float, nhưng bây giờ với inline-block nó thậm chí còn dễ dàng hơn. các phần tử inline-block giống như các phần tử inline nhưng chúng có thể có chiều rộng và chiều cao.

Tuy nhiên bạn có thể muốn sử dụng float: lefts thay vì display: inline-block;

Từ MDN

Thuộc tính float CSS xác định rằng một yếu tố nên được lấy từ dòng chảy bình thường và đặt dọc bên trái hoặc phải bên cạnh vùng chứa của nó, nơi các phần tử văn bản và nội tuyến sẽ bao quanh nó. Một phần tử nổi là một phần mà giá trị tính toán của phao không phải là không.

Answer 4

Phần tử Div là các phần tử theo kiểu khối, theo mặc định. để làm cho nó trong lvl ngang làm cho thuộc tính style hiển thị inline-block hoặc nổi chúng sang trái hoặc sang phải:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
</div> 

OR:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
    </div> 

Answer 5

Cái này đã làm các trick, các câu trả lời khác đã mất tích chi tiết này text-align: center ;.

Xin cảm ơn các bạn!

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
</div>