我是 CSS 编程的初学者，对文本定位有疑问。我必须在 CSS 中设计下载按钮没有符号字体或图像。我已经这样做了，但文本不想放入框内(图 1)。
这是我的 CSS 代码:
#download{
background-color: rgb(0, 230, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
width: 235px;
height: 65px;
}
#download p{
font-family: 'Roboto Slab', serif;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-size: 30px;
color:white;
padding-left: 50px;
padding-bottom: 300px;
}
#ikonad{
border-radius: 150px;
border-color: rgb(0, 179, 0);
border-width: 3px;
border-style: solid;
background-color: rgb(242, 242, 242);
height: 58px;
width: 58px;
padding-left: 1px;
padding-top: 1px;
}
.kvadrat{
width: 15px;
height: 20px;
background: rgb(0, 179, 0);
margin-left: 20px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding-top: 8px;
}
#trikotnik {
padding-top: 10px;
margin-left: 12.5px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid rgb(0, 179, 0);
}
这是我的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Gumbi</title>
</head>
<body>
<div id="download">
<div id="ikonad">
<div class="kvadrat"><p>Download</p></div>
<div id="trikotnik"></div></div>
</div>
如果有人告诉我我做错了什么，我会很高兴。非常感谢! :)
最佳答案
只需删除 <p> 的边距即可元素:
#download p {
margin: 0;
}
(附带问题:padding-bottom: 300px 在那里做什么？真的有必要吗？)
这是添加了 CSS 规则的标记:
#download {
background-color: rgb(0, 230, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
width: 235px;
height: 65px;
}
#download p {
font-family: 'Roboto Slab', serif;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-size: 30px;
color: white;
margin: 0;
padding-left: 50px;
padding-bottom: 300px;
}
#ikonad {
border-radius: 150px;
border-color: rgb(0, 179, 0);
border-width: 3px;
border-style: solid;
background-color: rgb(242, 242, 242);
height: 58px;
width: 58px;
padding-left: 1px;
padding-top: 1px;
}
.kvadrat {
width: 15px;
height: 20px;
background: rgb(0, 179, 0);
margin-left: 20px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding-top: 8px;
}
#trikotnik {
padding-top: 10px;
margin-left: 12.5px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid rgb(0, 179, 0);
}<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<div id="download">
<div id="ikonad">
<div class="kvadrat">
<p>Download</p>
</div>
<div id="trikotnik"></div>
</div>
</div>关于html - CSS:文本定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34001362/