Căn chỉnh các phần tử HTML theo chiều ngang trong một div

Question

Tôi có ba đối tượng HTML và muốn sắp xếp nút Trước ở bên trái, nút Tiếp theo ở bên phải và kéo dài ở giữa bên trong div vùng chứa.

<PREVIOUS> |SPAN| <NEXT> 

HTML

<div> 
    <input type="button" value="Previous" id="btnPrevious"/> 
    <span id="spanStage">Stage 5</span> 
    <input type="button" value="Next" id="btnNext"/> 
</div> 

CSS

#btnPrevious 
{ 
    float:left; 
} 
#spanStage 
{ 
    font-weight:bold; 
    vertical-align:middle;  
} 
#btnNext 
{ 
    float:right; 
} 

Answer 1

chỉ cần thêm text-align: center để wrapper của bạn để thiết lập sự liên kết ngang của tất cả các phi nổi/trẻ em không ở vị trí:

div{ 
    text-align:center; 
} 

<span> là những yếu tố inline theo mặc định. Vì vậy, bạn phải sử dụng display:block trên chúng và tạo kiểu cho chúng một cách thích hợp hoặc chỉ tinh chỉnh kiểu gốc một chút. Vì không có trẻ em nào khác ngoài số <span> và số <button> là tốt nhất của bạn với giải pháp đơn giản này.

Lưu ý rằng text-align:<value> được kế thừa từ cấp độ gốc, vì vậy nếu bạn muốn đưa thứ gì đó khác vào trình bao bọc, bạn nên kiểm tra xem text-align:center có phù hợp với bạn không. Nếu không, hãy sử dụng text-align:<value> trong phần tử cụ thể, trong đó value là left, right, center hoặc justify.

JSFiddle Demo

Answer 2

Demo

Thêm lớp - line đến tất cả các yếu tố trẻ em s mà bạn muốn trong một dòng duy nhất và thì đấy .. !! .. họ đang Tuân bạn ở lại một dòng !! ..

Đây là lừa -

.line{ 
width:33%; 
float:left; 
} 

Answer 3

Chỉ cần thêm mã này vào css của bạn.

#btnPrevious,#spanStage,#btnNext { 
     width:33%; 
     display:inline-block; 
    } 

Answer 4

Kiểu "hiển thị: flex" là cách hay để làm cho các thành phần này trong cùng một dòng. Không có vấn đề gì loại yếu tố trong div. Đặc biệt nếu lớp đầu vào là dạng điều khiển, các giải pháp khác như bootstrap, inline-block sẽ không hoạt động tốt.

Ví dụ:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center"> 
    <input type="button" value="Previous" id="btnPrevious"/> 
    <span id="spanStage">Stage 5</span> 
    <input type="button" value="Next" id="btnNext"/> 
</div> 

Thêm chi tiết về màn hình: flex:

flex-hướng: hàng, cột

biện minh-content: flex-end, trung tâm, không gian giữa, không gian -around

căn chỉnh các mục: kéo dài, uốn cong, bắt đầu, uốn cong, trung tâm