如何解决CSS:flexbox内的按钮的宽度小于内容的宽度
这是我的代码,我简化了结构。
因此,我们可以专注于button
和div
之间的区别
我不知道为什么button
中的文本会溢出并被裁剪。
button
不能适应内容,但是div
可以容纳内容。
(我在Windows Chrome浏览器上发现了这个问题,而Firefox似乎还可以)
我的解决方法是将button
替换为div
。
我想知道是否有人可以解释button
和div
之间的区别
为什么div
可以使用相同的样式?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.flexbox {
display: flex;
}
.btn {
display: inline-block;
background-color: #dc447d;
border: 0 solid #dc447d;
padding: 0 3%;
line-height: 1.63em;
font-size: 17.2px;
color: white;
border-radius: 5px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="flexbox">
<button class="btn">
<span>Start Free Trial</span>
</button>
</div>
<div class="flexbox">
<div class="btn">
<span>Start Free Trial</span>
</div>
</div>
</body>
</html>
解决方法
将填充更改为数字值可以解决此问题。
填充百分比基于父元素的宽度
padding: 0 10px
.flexbox {
display: flex;
}
.btn {
display: inline-block;
background-color: #dc447d;
border: 0 solid #dc447d;
padding: 0 10px;
line-height: 1.63em;
font-size: 17.2px;
color: white;
border-radius: 5px;
white-space: nowrap;
}
<div class="flexbox">
<button class="btn">
<span>Start Free Trial</span>
</button>
</div>
<div class="flexbox">
<div class="btn">
<span>Start Free Trial</span>
</div>
</div>
,
这是我更新的解决方案here,我已将我的代码笔链接设置为参考。
.btn {
display: inline-block;
background-color: #dc447d;
border: 0 solid #dc447d;
padding: 0 15px;
line-height: 1.63em;
font-size: 17.2px;
color: white;
border-radius: 5px;
white-space: nowrap;
}
,
查看此代码段:
.flexbox {
display: flex;
justify-content: center;
align-items: center;
}
.btn {
width: 100%;
text-align: center;
background-color: #dc447d;
border: 0 solid #dc447d;
padding: 0 3%;
line-height: 1.63em;
font-size: 17.2px;
color: white;
border-radius: 5px;
white-space: nowrap;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="flexbox">
<button class="btn">
<span>Start Free Trial</span>
</button>
</div>
<br>
<div class="flexbox">
<div class="btn">
<span>Start Free Trial</span>
</div>
</div>
</body>
</html>
首先,我添加了额外的<br/>
,目的是正确显示带有清晰边框的内容。
现在.flexbox
css,justify-content: center;
和align-items: center;
内部用于在flex-box的中心完美对齐内容。
此外,.btn
width: 100%;
内部用于使内容宽度达到flex-box的100%。您可以更改此属性,也可以根据需要使用height: 100%
属性,为此需要增加flex-box的高度。
最后,text-align: center;
仅用于<div class="btn">
,以使其内容水平居中。
.flexbox {
display: inline flex;
}
.btn {
display: inline-block;
background-color: #dc447d;
border: 0 solid #dc447d;
padding: 0 3%;
line-height: 1.63em;
font-size: 17.2px;
color: white;
border-radius: 5px;
white-space: nowrap;
}
.
使用内联flex而不是flex可以解决此问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。