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

【问题标题】：Trying to eliminate spaces between list items in CSS/Bulma试图消除 CSS/Bulma 中列表项之间的空格
【发布时间】：2020-12-20 16:20:12
【问题描述】：

我目前正在尝试构建一个模仿天气应用程序的项目；我想以某种方式设计一些菜单选项。从本质上讲，我希望各个项目占据它们所在容器的全部量，而不会溢出。我目前正在使用 flexbox 将它们分布在整个容器中，但我对如何填充整个容器有点困惑。我的单个菜单项只占用少量空间。

我尝试过调整框的高度和宽度，但我觉得有一种更好的方法，响应速度更快，也不那么笨重。我也尝试过从我的 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;

【问题讨论】：

不完全清楚你想要什么。您是否希望带有绿色边框的按钮占据整个高度而彼此之间不留空间？
对不起，是的，这是一种更好的描述方式。我希望他们在不留下任何空白且不加倍顶部/底部边框的情况下相互“碰撞”！
我给了你解决办法

标签： html css list flexbox bulma

【解决方案1】：

为了解决您的问题，我为 css 创建了两个选择器。在第一个选择器中，我们将li 标签拉伸到整个空闲空间：

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

在第二个选择器中，我们为a 标签设置了height: 100%：

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

此外，对于父选择器.menu-list，我们为5 pixels 的按钮间空间设置gap 规则：

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

另外为 css 创建这个选择器：

#menu-column {
    height: 100%;
}

运行 sn-p 并检查它。

.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 基础方面做得更好，以减少对框架的依赖，这样我将来就可以避免这个问题。
很高兴我的回答让您了解了您在 css 中的问题。将来我也很乐意为您提供帮助。就个人而言，我不使用bootstrap之类的框架，我认为最好自己弄清楚并做一些事情。好的编码，朋友。