html - 如何设置垂直?
问题描述
我目前在我的页脚上有这个,我想在较小的屏幕上垂直放置它,但不知道该怎么做。不确定这是否重要,但我在网站上使用 flexbox 模型。
body { background-color: black; }
.menu-footer {
flex-direction: column;
padding-top: 50px;
}
.menu-footer ul {
list-style: none;
display: flex;
}
.menu-footer li {
margin-left: 45px;
font-family: "Josefin Sans", sans-serif;
display: list-item;
list-style-type: none;
padding: 5px 0 5px 0;
}
.menu-footer a {
color: rgb(255, 255, 255);
text-decoration: none;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
}
.social-media ul {
list-style: none;
display: flex;
justify-content: center;
}
.social-media li {
margin-left: 30px;
display: list-item;
list-style-type: none;
padding: 40px 0 10px 0;
color: rgb(255, 255, 255);
font-size: 1.3rem;
}
<div class="column">
<div class="menu-footer">
<ul>
<li><a class="transition" href="./index.html">home</a></li>
<li><a class="transition" href="./about.html">about</a></li>
<li><a class="transition" href="./work.html">work</a></li>
<li>
<a class="transition" href="./contact.html">contact</a>
</li>
</ul>
</div>
现在的样子
解决方案
要在较小的屏幕中实现垂直样式,只需在媒体查询中添加display: block
in.menu-footer ul
样式,指定所需的屏幕尺寸。
body{
background: black;
}
.menu-footer {
flex-direction: column;
padding-top: 50px;
}
.menu-footer ul {
list-style: none;
display: flex;
}
.menu-footer li {
margin-left: 45px;
font-family: "Josefin Sans", sans-serif;
display: list-item;
list-style-type: none;
padding: 5px 0 5px 0;
}
.menu-footer a {
color: rgb(255, 255, 255);
text-decoration: none;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
}
.social-media ul {
list-style: none;
display: flex;
justify-content: center;
}
.social-media li {
margin-left: 30px;
display: list-item;
list-style-type: none;
padding: 40px 0 10px 0;
color: rgb(255, 255, 255);
font-size: 1.3rem;
}
@media only screen and (max-width: 600px){
.menu-footer ul{
display: block;
}
}
<div class="column">
<div class="menu-footer">
<ul>
<li><a class="transition" href="./index.html">home</a></li>
<li><a class="transition" href="./about.html">about</a></li>
<li><a class="transition" href="./work.html">work</a></li>
<li>
<a class="transition" href="./contact.html">contact</a>
</li>
</ul>
</div>
推荐阅读
- html - html上的嵌入视频不播放
- replace - 在 tcl 中查找并替换文件中的数字
- python - 如果要链接两个节点(如果它们共享相同的属性),如何在节点列表中创建链接
- wordpress - 如何将无价格产品放在列表末尾,按最低价格排序
- python-3.x - 如何在 tkinter 应用程序中创建打印对话框
- node.js - Firebase 存储 - 调整图片扩展名
- c++ - 尝试使用 OpenSSL 在服务器和客户端之间进行安全握手
- linux - 致命:$HOME 未在 POP 操作系统上设置
- javascript - 如果放大图表区域的空白位置,浏览器会冻结
- string - 在字符串中的单词之间添加字符