html - 如何将所有星级评分放在同一行?
问题描述
我确实编写了这段代码来查看星级,但我希望它们在同一行。我正在尝试使用表格标签,但它不起作用。请告诉我如何开始,以便我可以继续并完成它。它应该类似于这张图片:
这是我的代码,但我坚持如何去做。感谢您的帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Star Rating</title>
<style>
h2 {
text-align: center;
color: white;
font-size: 30px;
font-family: Calibri;
}
#position {
text-align: center;
}
#box {
outline: 10px double;
outline-color: black;
outline-offset: 1px;
background: dodgerblue;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
.star-icon {
color: #ddd;
font-size: 2em;
position: relative;
}
.star-icon.full:before {
text-shadow: 0 0 2px rgba(0,0,0,0.7);
color: #FDE16D;
content: '\2605'; /* Full star in UTF-8 */
position: absolute;
left: 0;
}
@-moz-document url-prefix() { /* Firefox Hack :( */
.star-icon {
font-size: 50px;
line-height: 20px;
}
}
</style>
</head>
<body>
<div id="box">
<div id="position">
<h2>Rating</h2>
<div class="position">
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon ">☆</span>
<span class="star-icon ">☆</span>
<span class="star-icon">☆</span>
</div>
<h2>Rating</h2>
<div id="position">
<span class="star-icon full ">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon ">☆</span>
<span class="star-icon">☆</span>
</div>
<h2>Rating</h2>
<div id="position">
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon">☆</span>
</div>
</div>
</div>
</body>
</html>
解决方案
尝试这个:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Star Rating</title>
<style>
h2 {
text-align: center;
color: white;
font-size: 30px;
font-family: Calibri;
border-style: solid; // for now
float: left;
margin: 5px;
display: inline-block;
width: 90px;
height: 40px;
}
#position {
text-align: center;
border-style: solid; // for now
float: left;
display: inline-block;
}
#box {
outline: 10px double;
outline-color: black;
outline-offset: 1px;
background: dodgerblue;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
.star-icon {
color: #ddd;
font-size: 2em;
position: relative;
}
.star-icon.full:before {
text-shadow: 0 0 2px rgba(0,0,0,0.7);
color: #FDE16D;
content: '\2605'; /* Full star in UTF-8 */
position: absolute;
left: 0;
}
@-moz-document url-prefix() { /* Firefox Hack :( */
.star-icon {
font-size: 50px;
line-height: 20px;
}
}
</style>
</head>
<body>
<div id="box">
<div id="position">
<h2>Rating</h2>
<div id="position">
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon ">☆</span>
<span class="star-icon ">☆</span>
<span class="star-icon">☆</span>
</div>
<h2>Rating</h2>
<div id="position">
<span class="star-icon full ">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon ">☆</span>
<span class="star-icon">☆</span>
</div>
<h2>Rating</h2>
<div id="position">
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon">☆</span>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- c# - 尽管有 IAppBuilder.MapSignalR(),但未找到信号器/信号器/集线器
- c# - 如何使用 ASP.NET Core 3.1 替换 Swashbuckle 5.0.0 中的消费和生产?
- mysql - Laravel 应用程序上的删除数据应该有限制行为,但它没有
- docker - 如何查看 Docker Desktop 安装的版本?
- view - RapidClipse X - 弹出视图
- visual-studio - 由于无法检索令牌,尝试与 Azure DevOps 通信失败
- javascript - 在第二次调用 jquery 时出现 403 AJAX 错误
- java - Powermock 和 Jmockit 是否有替代方法来模拟静态和私有方法?
- python - Pandas - 基于列对行进行分组并用非空值替换 NaN
- typescript - 商店抢劫算法 - 以最佳价格和重量比将抢劫袋装满最大容量