我目前正在尝试构建一个类似于天气应用的项目;我想以某种特定的方式为一些菜单选项设置样式。基本上,我希望各个项目占据它们所在容器的全部空间,而不会溢出。我目前使用flexbox来在容器中分配它们,但是我有点困在如何填满整个容器的问题上。我的单独菜单项只占用很少的空间。
我尝试调整框的高度和宽度,但我觉得还有更好的方法,更具响应性且不那么笨重。我也尝试从我的HTML中删除空白(根据其他帖子),但这似乎不能解决我的问题。 绿色的单独菜单项- 我希望它们平均填满容器(由我叠加的红色框表示)。
我尝试调整框的高度和宽度,但我觉得还有更好的方法,更具响应性且不那么笨重。我也尝试从我的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;