Попытка устранить пробелы между элементами списка в CSS/Bulma

В настоящее время я пытаюсь создать проект, имитирующий приложение погоды; Я хочу стилизовать некоторые пункты меню определенным образом. По сути, я хочу, чтобы отдельные элементы занимали весь объем контейнера, в котором они находятся, не переполняясь. В настоящее время я использую flexbox для распределения их по всему контейнеру, но я немного застрял в том, как заполнить весь контейнер. Мои отдельные пункты меню занимают мало места.

Я пытался настроить высоту и ширину блоков, но мне кажется, что есть способ лучше, более отзывчивый и менее громоздкий. Я также пытался удалить пробелы из моего HTML (как и в других сообщениях), но это, похоже, не решает мою проблему.

Отдельные пункты меню выделены зеленым цветом — я хочу, чтобы они одинаково заполняли контейнер (представлен наложенными красными прямоугольниками).

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Weather</title>
    <link rel = "stylesheet" href = "app.css">
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <script src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
  <input type = "text" placeholder = "Timbuktu" name = "location">
  <button>Click for current weather!</button>
  <ul id = "temps"></ul>
    <section>
        <div class = "container">
            <div class = "card">
                <header class = "card-header">
                    <h1 class = "card-header-title">Mitch's Weather Widget</h1>
                </header>
                <div class = "card-content">
                    <div class = "columns is-mobile">
                        <div class = "column" id = "menu-column">
                            <aside class = "menu">
                                <ul class = "menu-list">
                                  <li><a id = "current">Current Weather</a></li>
                                  <li><a id = "hourly">Hourly Forecast</a></li>
                                  <li><a id = "weekly">Next 7 Days</a></li>
                                  <li><a id = "maps">Maps</a></li>
                                </ul>
                            </aside>
                        </div>
                        <div class = "column is-three-quarters">
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem iste minus quae numquam perspiciatis accusantium incidunt excepturi at quia aspernatur, nulla minima illum rerum quasi quisquam tempore labore nemo repellat.
                            Corporis, cumque quas sunt voluptatem, itaque ducimus eum nobis repellendus libero animi, dolorum saepe quae expedita adipisci eos? Autem, tenetur. Esse voluptatibus ab doloremque praesentium quo dolore, debitis molestiae harum.
                            Placeat iusto asperiores vel. Provident ex officia quidem at? Possimus, necessitatibus omnis cum autem deserunt rem maiores vel pariatur! Molestias asperiores accusamus quia qui maiores aut illum repudiandae optio tenetur?</p>
                        </div>
                    </div>
                </div>
                <footer class = "card-footer">
                  <p class = "card-footer-item">
                    <span>
                      View on <a href = "https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
                    </span>
                  </p>
                  <p class = "card-footer-item">
                    <span>
                      Share on <a href = "#">Facebook</a>
                    </span>
                  </p>
                </footer>
              </div>
        </div>
    </section>


    <script src = "app.js"></script>
</body>

</html>

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

.columns {
    height: 60vh;
}

/* centering the title */
h1 {
    display: flex;
    justify-content: center;
}

/* vertical border beside the menu */
.column:first-child {
    border-right: 1px solid hsl(0, 0%, 96%);
}

/* inherit the body-size of the parent column */
#menu-column,
.menu,
.menu-list {
    width: inherit;
    height: inherit;
}

/* distribute menu items evenly */
.menu-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* individual menu items */
    #current,
    #hourly,
    #weekly,
    #maps {
    border: 2px solid green;

Не совсем понятно, что вы хотите. Вы хотите, чтобы кнопки с зеленой рамкой занимали всю высоту, не оставляя между собой промежутка?

— 20.12.2020 21:17

Извините, да, это лучший способ описать это. Я хочу, чтобы они «натыкались» друг на друга, не оставляя пробелов и не удваивая верхнюю/нижнюю границы!

— 21.12.2020 18:19

я дал тебе решение

— 22.12.2020 05:06

html css list flexbox bulma

20.12.2020 17:20

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

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

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Разница между тегами Br и Wbr в HTML 5

В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...

HTML И VS CODE Для Веб-разработки

Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...

Как использовать WAI-ARIA

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

Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.

Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...

262

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

Ответы 1

Ответ принят как подходящий

Чтобы решить вашу проблему, я создал два селектора для css. В первом селекторе растягиваем тег li на все свободное место:

.menu-list li {
    flex: 1;
    box-sizing: border-box;
}

Во втором селекторе мы устанавливаем height: 100% для тега a:

.menu-list li a {
    height: 100%;
}

Также для родительского селектора .menu-list мы устанавливаем правило gap для межкнопочного пространства 5 pixels:

.menu-list {
    ...
    gap: 5px;
}

И дополнительно создайте этот селектор для css:

#menu-column {
    height: 100%;
}

Запустите фрагмент и проверьте его.

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

.columns {
    height: 60vh;
}

/* centering the title */
h1 {
    display: flex;
    justify-content: center;
}

/* vertical border beside the menu */
.column:first-child {
    border-right: 1px solid hsl(0, 0%, 96%);
}

/* inherit the body-size of the parent column */
#menu-column,
.menu,
.menu-list {
    width: inherit;
    height: inherit;
}

#menu-column {
    height: 100%;
}

/* distribute menu items evenly */
.menu-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 5px;
}

.menu-list li {
    flex: 1;
    box-sizing: border-box;
}

.menu-list li a {
    height: 100%;
}

/* individual menu items */
    #current,
    #hourly,
    #weekly,
    #maps {
    border: 2px solid green;
    }

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Weather</title>
    <link rel = "stylesheet" href = "app.css">
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <script src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
  <input type = "text" placeholder = "Timbuktu" name = "location">
  <button>Click for current weather!</button>
  <ul id = "temps"></ul>
    <section>
        <div class = "container">
            <div class = "card">
                <header class = "card-header">
                    <h1 class = "card-header-title">Mitch's Weather Widget</h1>
                </header>
                <div class = "card-content">
                    <div class = "columns is-mobile">
                        <div class = "column" id = "menu-column">
                            <aside class = "menu">
                                <ul class = "menu-list">
                                  <li><a id = "current">Current Weather</a></li>
                                  <li><a id = "hourly">Hourly Forecast</a></li>
                                  <li><a id = "weekly">Next 7 Days</a></li>
                                  <li><a id = "maps">Maps</a></li>
                                </ul>
                            </aside>
                        </div>
                        <div class = "column is-three-quarters">
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem iste minus quae numquam perspiciatis accusantium incidunt excepturi at quia aspernatur, nulla minima illum rerum quasi quisquam tempore labore nemo repellat.
                            Corporis, cumque quas sunt voluptatem, itaque ducimus eum nobis repellendus libero animi, dolorum saepe quae expedita adipisci eos? Autem, tenetur. Esse voluptatibus ab doloremque praesentium quo dolore, debitis molestiae harum.
                            Placeat iusto asperiores vel. Provident ex officia quidem at? Possimus, necessitatibus omnis cum autem deserunt rem maiores vel pariatur! Molestias asperiores accusamus quia qui maiores aut illum repudiandae optio tenetur?</p>
                        </div>
                    </div>
                </div>
                <footer class = "card-footer">
                  <p class = "card-footer-item">
                    <span>
                      View on <a href = "https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
                    </span>
                  </p>
                  <p class = "card-footer-item">
                    <span>
                      Share on <a href = "#">Facebook</a>
                    </span>
                  </p>
                </footer>
              </div>
        </div>
</section>
    <script src = "app.js"></script>
</body>

</html>

Большое вам спасибо за вашу помощь. Я поигрался с файлом, прежде чем вы прокомментировали, и нашел неуклюжий способ сделать это. Но это сильно очищает. В настоящее время я возвращаюсь и совершенствуюсь в своих основах CSS, чтобы меньше полагаться на фреймворки, чтобы избежать этой проблемы в будущем.

— 23.12.2020 19:01

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

— 23.12.2020 19:05

22.12.2020 04:56