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

标签 html css list flexbox bulma

我目前正在尝试构建一个模仿天气应用程序的元素；我想以某种方式设置一些菜单选项的样式。本质上，我希望单个元素占据它们所在容器的全部空间，而不会溢出。我目前正在使用 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;

最佳答案

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

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

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

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

此外，对于父级选择器 .menu-list，我们为 5 像素 的按钮间距设置了 gap 规则: 

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

关于html - 试图消除 CSS/Bulma 中列表项之间的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65382047/

上一篇：Android Dark 主题反转矢量绘图的颜色

下一篇：sonarqube - 合并纽约市的报道

相关文章：

html - 悬停期间的淡入淡出效果 - border-radius 不起作用

list - Erlang:对现有列表的列表理解

python - 单独浏览一个列表

JavaScript 在 Cordova Visual Studio 2015 中无法工作

javascript - 确认后显示gif，直到在javascript中加载完成

html - 为每个要打印的页面设置边距/填充(html/css)？

SQL Server，将列表创建为 1 列

html - 背景图像重复页面的全高？

javascript - 将 html 文件重命名为 php 时编码错误

html - 悬停菜单消失得太快

©2024 IT工具网  联系我们