Как поставить все рейтинги в одну строку?

Я написал этот код для просмотра звездных рейтингов, но хочу, чтобы они были в одном ряду. Я пытаюсь использовать теги таблиц, но это не работает. Пожалуйста, покажите мне, как начать, чтобы я мог продолжить и закончить. Это должно выглядеть примерно так:

Вот мой код, но я застрял в том, как это сделать. Спасибо за помощь.

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

html css

04.07.2018 19:09

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

154

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

04.07.2018 19:17

попробуй это:

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

04.07.2018 19:47

Другие вопросы по теме

Показывать изображение с соотношением сторон 4: 5 и размещать внутри контейнера в React Native

Файл Flask main.css не работает с файлом base.html

Класс IMG не применяется

Выровняйте элементы встроенного блока по левому и правому краю контейнера

Изображение рисования холста HTML 5 не показывает css

Как сделать "background: url (" ") (CSS) настраиваемым изображением в WordPress для клиента

CSS-анимация, примененная к нескольким элементам, приводит к разнице в скорости анимации

Как я могу заставить работать дочерний элемент в моей CSS-сетке?

Мимическое текстовое поле в div

Перекрывающиеся строки в таблице HTML

Как поставить все рейтинги в одну строку?

Ответы 2

Другие вопросы по теме

Похожие вопросы