gpt4 book ai didi

html - 按钮中的文字不在一行

转载 作者:太空宇宙 更新时间:2023-11-03 21:43:04 24 4
gpt4 key购买 nike

我是 CSS 和 HTML 的初学者,无法理解这一点。我试过使用 max-heightline heightline-clamp 没有任何效果。

HTML代码:

<head>
<link rel="stylesheet" type="text/css" href="stylesheet home.css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="div1" style="height: 500px">
<p>Welcome to the FIFA tournament creator</p>
<a href="#" class="blue btn">Get Started</a>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

div
{
}
#div1
{
background-image: url(../Images/div1.png);
min-height: 440px;
font-size: 35px;
font-family: molengo, sans-serif;
font-weight: 600;
font-variant: normal;
font-style: normal;
color: #FFFFFF;
}
.btn {
background: #CCC;
color: #FFF;
display: inline-block;
border-radius: 3px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
font-family: Arial, sans-serif;
padding: 0 3em;
text-decoration: none;
background: linear-gradient(#11A1D6,#0E86B2);
text-shadow: 1px 1px 1px #0E86B2;
height: 50px;
width: 50px;
-webkit-line-clamp: 1;
line-height: 1;
text-align: left;
}
.blue.btn {
background: linear-gradient(#11A1D6,#0E86B2);
text-shadow: 1px 1px 1px #0E86B2;
}
.btn:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
inset 0 1.5em 1em rgba(255,255,255,0.3);
}
.btn:active {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
inset 0 1.5em 1em rgba(0,0,0,0.3);
}

最佳答案

您的问题是您从填充中获得了大部分宽度。填充正是它听起来的样子 - 用于构建元素的内部空白空间。

这不要与 ma​​rgin 混淆,ma​​rgin 是元素周围的空白区域

要解决您的问题,您需要获得由 width 元素定义的可用宽度。当前设置为 50px,这对于您的文本来说不够大。事实上,您甚至看到整个单词“started”的唯一原因是因为您没有设置 overflow 属性。


只需从按钮中删除 width:50px 或将其设置为 auto 即可。我还更改了按钮的填充以保持原始大小。您还可以删除高度值并将其替换为垂直填充以使文本居中:

padding: 10px 1em;
height: 50px;
width: 50px;

JSFiddle

关于html - 按钮中的文字不在一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22279385/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com