如何解决试图消除 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;
解决方法
为了解决您的问题，我为 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。