我确实编写了这段代码来查看星级，但我希望它们位于同一行。我正在尝试使用表标签，但它不起作用。请告诉我如何开始，以便我可以继续并完成它。它应该类似于这张图片:
这是我的代码，但我一直不知道如何做到这一点。感谢您的帮助。
<!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>关于html - 如何将所有星级放在同一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51178365/