个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-05 04:55:35 27 4
gpt4 key购买 nike

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

27 4 0
文章推荐： python - 导入 PySide2 时出现 ImportError
文章推荐： sonarqube - 合并纽约市的报道
文章推荐： Android Dark 主题反转矢量绘图的颜色
文章推荐： Angular 11 Firebase 服务器端呈现无限加载/挂起
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com