Question

我确实写了这段代码来查看星级，但我希望它们位于同一行。我正在尝试使用表格标签，但是它不起作用。请告诉我如何开始，以便我可以继续并完成它。它看起来应该类似于此图片：

这是我的代码，但我坚持这样做。谢谢您的帮助。

<!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>

Answer 1

尝试一下：

       
    <!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>

Answer 2

我们可以通过在display: inline-block和#box上添加h2来实现。

<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;
      display: inline-block;
    }
    #position {
        text-align: center;
      display: inline-block;
    }
    #box {
        outline: 10px double;
        outline-color: black;
        outline-offset: 1px;
        background: dodgerblue;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
      text-align: center;
    }

    .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>

如何将所有星级评定排在同一行？

2 个答案: