nút với display: block không kéo dài

Hãy xem xét các mã HTML sau đây:nút với display: block không kéo dài

<!DOCTYPE html> 
<html> 
<head> 
    <title>TEST</title> 
    <style> 
     button { 
      display: block; 
      margin: 10px; 
     } 
    </style> 
</head> 
<body> 
    <div style="width: 100px; border: 1px solid black"> 
     <button>hello</button> 
     <button>hi</button> 
    </div> 
</body> 
</html>

Câu hỏi của tôi là lý do tại sao các nút không kéo dài đến 100% chiều rộng vì display của họ là block. Làm thế nào để đạt được điều này? Tôi không thể đặt kiểu nút thành width: 100% vì chúng sẽ làm tràn khối cha của chúng vì lề.

Nguồn

2012-03-14 Martin Ždila

bạn đã thêm vị trí: tương đối; và sau đó thêm chiều rộng: 100%? –

bản sao có thể có của [đầu vào có hiển thị: khối không phải là một khối, tại sao không?] (Http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not) – Qtax

Qtax: 'hộp kích thước: border-box' đã không làm việc cho tôi. Không biết tại sao. –

Bạn có thể thêm đệm vào div vùng chứa và xóa lề ngang khỏi các nút. Sau đó, bạn có thể áp dụng rộng 100% đối với họ:

<!DOCTYPE> 
<html> 
<head> 
    <title>TEST</title> 
    <style> 
     button { 
      display: block; 
      width:100%; 
      margin: 10px 0; 
     } 
    </style> 
</head> 
<body> 
    <div style="width: 100px; border: 1px solid black; padding:0 10px;"> 
     <button>hello</button> 
     <button>hi</button> 
    </div> 
</body> 
</html>

Demo: http://jsfiddle.net/xwt9T/1/

Nguồn

2012-03-14 09:35:24 welldan97

Đó là một loại "hack" đối với tôi, nhưng nó hoạt động. Cảm ơn! –

Nhưng, các yếu tố khối không nhất thiết phải rộng 100% ... – Greg

Tôi sẽ đề xuất sử dụng kích thước hộp: hộp biên giới, để giữ nút đệm bên trong 100% đó – FrancescoMM

Hãy thử với điều này,

<div style="width: 100px; border: 1px solid black"> 
    <button style="width:100%; float: left;margin-left:0px;">hello</button> 
    <button>hi</button> 
</div>

Nguồn

2012-03-14 09:37:06

flex-grow: 1 sẽ tạo ra hành vi dự kiến.

Nguồn

2017-04-27 13:39:34 brannigan

nút với display: block không kéo dài

Trả lời

Các vấn đề liên quan