display: block 덕분에 자체 버튼으로 버튼을 만들고 있습니다. 그런데 왜 전체 폭을 차지합니까? 대신 버튼 안의 텍스트의 일반 너비를 사용하게하려면 어떻게해야합니까?<a> display : block이 전체 너비를 차지하는 것을 피하는 방법은 무엇입니까?
html, body { width: 100%; height: 100%; }
#a { width: 100%; height: 100%; background-color: red; }
#b { background-color: blue; display: block; }<div id="a">
<div>This is a button in its own line, thanks to "display: block"</div>
<a id="b">Button</a>
<div>Something else</div>
</div>작동 예. 그래서, 대신, '블록'행동의 정의입니다 inline-block
html,
body {
width: 100%;
height: 100%;
}
#a {
width: 100%;
height: 100%;
background-color: red;
}
#b {
background-color: blue;
display: inline-block;
}<div id="a">
<div>This is a button in its own line, thanks to "display: block"</div>
<a id="b">Button</a>
<div>Something else</div>
</div>가 그것에게 display:inline-block;를주고 당신이 원하는대로 작동합니다.
기본적으로 블록 요소는 부모의 전체 너비를 취
html,
body {
width: 100%;
height: 100%;
}
#a {
width: 100%;
height: 100%;
background-color: red;
}
#b {
background-color: blue;
display: inline-block;
}<div id="a">
<div>This is a button in its own line, thanks to "display: block"</div>
<a id="b">Button</a>
<div>Something else</div>
</div>
를 사용합니다. 이 행동을 원하지 않는다면 아마도'display : inline-block;'을 사용하거나 버튼을 너비를 제한하는 요소에 넣으십시오. –
@omkara이 경우에는 부트 스트랩이 필요하지 않으며 타사를 사용할 예정인 OP도 언급하지 않았다. –
html, body 또는 div의 경우 'width : 100 %'가 필요하지 않습니다. 기본값이기 때문에 이러한 블록 수준 요소에 대한 동작 –