试图消除 CSS/Bulma 中列表项之间的空格

Question

I'm currently trying to build a project that mimics a weather app;我目前正在尝试构建一个模仿天气应用程序的项目； I want to style some menu options a certain way.我想以某种方式设置一些菜单选项的样式。 Essentially, I want the individual items to take up the full amount of the container they are in, without overflowing.本质上，我希望各个项目占据它们所在容器的全部量，而不会溢出。 I'm currently using flexbox to distribute them throughout the container, but I'm a bit stuck on how to fill the entire container.我目前正在使用 flexbox 将它们分布在整个容器中，但我对如何填充整个容器有点困惑。 My individual menu items are only taking up small amounts of space.我的单个菜单项只占用少量空间。

I've tried adjusting the height and width of the boxes, but I feel like there is a better way that is more responsive and less clunky.我尝试过调整盒子的高度和宽度，但我觉得有一种更好的方法，响应速度更快，也不那么笨重。 I've also tried deleting whitespace from my HTML (as per other posts) but this seems to not solve my problem.我也尝试从我的 HTML 中删除空格（根据其他帖子），但这似乎不能解决我的问题。

Individual menu items in green – I want them to fill up the container equally (represented by the reddish boxes I've superimposed.绿色的单个菜单项——我希望它们均匀地填满容器（由我叠加的红色框表示。

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

Answer 1

To solve your problem, I created two selectors for css.为了解决您的问题，我为 css 创建了两个选择器。 In the first selector, we stretch the li tag to the entire free space:在第一个选择器中，我们将li标签拉伸到整个空闲空间：

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

In the second selector, we set the height: 100% for the a tag:在第二个选择器中，我们为a标签设置了height: 100% ：

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

Also, for the parent selector .menu-list , we set the gap rule for an inter-button space of 5 pixels :此外，对于父选择器.menu-list ，我们为5 pixels的按钮间距设置了gap规则：

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

And additionally create this selector for css:另外为 css 创建这个选择器：

#menu-column {
    height: 100%;
}

Run the snippet and check it out.运行代码片段并检查它。

 .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/Bulma 中列表项之间的空格

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-12-22 03:56:48

试图消除 CSS/Bulma 中列表项之间的空格

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-12-22 03:56:48

解决方案1
1 已采纳 2020-12-22 03:56:48