html - CSS边距:页脚中的自动问题
问题描述
我的问题是将页脚栏内的空间分成 3 部分(每部分的宽度相同)
footer {
width: 100%;
/*breite: 100%*/
padding: 0;
margin: 0;
background-color: darkcyan;
/*Hintergrundfarbe*/
margin-bottom: 0;
bottom: 0;
}
.footer-items {
width: 80%;
margin: auto;
display: flex;
/*bringt alle Teile in eine Linie*/
text-align: center;
/*zentriert ganzen Text im footer*/
}
<div class="footer-items">
<div class="company-items">
<h3 class="company">Company</h3>
<ul>
<li><a href="text1.html">Text1</a></li>
<li><a href="text2.html">Text2</a></li>
<li><a href="text3.html">Text3</a></li>
</ul>
</div>
<div class="social-items">
<h3 class="social">Social</h3>
<ul>
<li><a>Twitter</a></li>
<li><a>Instagram</a></li>
<li><a>Reddit</a></li>
</ul>
</div>
<div class="other-items">
<h3 class="text">Text4</h3>
<ul>
<li><a>other1</a></li>
<li><a>other2</a></li>
</ul>
</div>
</div>
如果我尝试为页脚中的 3 个项目做某事margin-left: 33%
,这是行不通的。
感谢您的帮助
解决方案
您可以使用 CSS 的 flex 属性来完成,我在下面添加了代码片段。请检查 :
footer{
width: 100%; /*breite: 100%*/
padding: 0;
margin: 0;
background-color: darkcyan; /*Hintergrundfarbe*/
margin-bottom: 0;
bottom: 0;
}
.footer-items{
width: 80%;
margin: auto;
display: flex; /*bringt alle Teile in eine Linie*/
text-align: center; /*zentriert ganzen Text im footer*/
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.footer-items .company-items, .footer-items .social-items, .footer-items .other-items {
display: block;
width: 100%;
text-align: left;
}
<div class="footer-items">
<div class="company-items">
<h3 class="company">Company</h3>
<ul>
<li><a href="text1.html">Text1</a></li>
<li><a href="text2.html">Text2</a></li>
<li><a href="text3.html">Text3</a></li>
</ul>
</div>
<div class="social-items">
<h3 class="social">Social</h3>
<ul>
<li><a>Twitter</a></li>
<li><a>Instagram</a></li>
<li><a>Reddit</a></li>
</ul>
</div>
<div class="other-items">
<h3 class="text">Text4</h3>
<ul>
<li><a>other1</a></li>
<li><a>other2</a></li>
</ul>
</div>
</div>
推荐阅读
- node.js - 我的 NodeJS http POST 请求计算 json 值的总和不起作用
- arrays - 要求用户在数组中插入值
- html - 我可以从登陆页面预加载我拥有的另一个网站吗?
- reactjs - 从双 svg d 路径创建自定义反应材料 ui 图标
- firemonkey - firemonkey中的java path.quadto等于什么?
- css - 如何为点制作边框(CSS)
- powershell - Powershell - 从大型文本文件创建哈希表并进行搜索
- opencv - 识别 OpenCV VideoCapture 的 read() 使用的解码器
- python - 使用清单将形状添加到 Plotly Graph
- java - 如何通过 REST API 获取 firebase 配置的默认值和条件值?