Html 如何避免这种情况<；a>；带显示：块占用整个宽度？

由于

display:block

，我在自己的行中创建了一个按钮。但是为什么它需要整个宽度呢如何使其采用按钮内文本的正常宽度？

html，正文{宽度：100%；高度：100%；}
#a{宽度：100%；高度：100%；背景色：红色；}
#b{背景色：蓝色；显示：块；}

这是它自己行中的一个按钮，多亏了“display:block”
按钮
别的

给它一个

显示：内联块它将按照您的意愿运行

工作示例


html，
身体{
宽度：100%；
身高：100%；
}
#a{
宽度：100%；
身高：100%；
背景色：红色；
}
#b{
背景颜色：蓝色；
显示：内联块；
}

这是它自己行中的一个按钮，多亏了“display:block”
按钮
别的
给它一个
显示：内联块它将按照您的意愿运行

工作示例


html，
身体{
宽度：100%；
身高：100%；
}
#a{
宽度：100%；
身高：100%；
背景色：红色；
}
#b{
背景颜色：蓝色；
显示：内联块；
}

这是它自己行中的一个按钮，多亏了“display:block”
按钮
别的
默认情况下，块元素采用其父元素的全宽。
因此，使用
内联块


html，
身体{
宽度：100%；
身高：100%；
}
#a{
宽度：100%；
身高：100%；
背景色：红色；
}
#b{
背景颜色：蓝色；
显示：内联块；
}

这是它自己行中的一个按钮，多亏了“display:block”
按钮
别的
默认情况下，块元素采用其父元素的全宽。
因此，使用
内联块


html，
身体{
宽度：100%；
身高：100%；
}
#a{
宽度：100%；
身高：100%；
背景色：红色；
}
#b{
背景颜色：蓝色；
显示：内联块；
}

这是它自己行中的一个按钮，多亏了“display:block”
按钮
别的
这是“阻塞”行为的定义。如果您不希望出现这种行为，那么可以使用
display:inline块
，或者将按钮放在限制其宽度的元素中。@omkara在这种情况下不需要引导，而且OP从未提到他打算使用第三方。对于html、正文或div，您也不需要
width:100%
，因为这是这些块级元素的默认行为。这是“块”行为的定义。如果您不希望出现这种行为，那么可以使用
display:inline块
，或将按钮放在限制其宽度的元素中。@omkara在这种情况下不需要引导，而且OP从未提到他打算使用第三方。对于html、body或div，您也不需要
width:100%
，因为这是这些块级元素的默认行为。