如何避免<a> with display:block takes whole width?

Question

I'm creating a button in its own line thanks to display: block. But why does it take the whole width? How to make it take the normal width of the text inside the button instead?

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>

Answer 1

给它一个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>

Answer 2

默认情况下，块元素采用其父级的全宽度。 因此，请使用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>