請問導航欄怎么做成V型
大佬們幫幫我
uj5u.com熱心網友回復：
能畫個圖嗎？導航欄個數是固定的嗎？uj5u.com熱心網友回復：
這里發不成圖片 我找不到在哪里發送圖片uj5u.com熱心網友回復：
我私信給你了 你看一下 回我一下uj5u.com熱心網友回復：
<!DOCTYPE html><html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*盒模型border、padding、content變化不影響設定的寬高*/
div {
box-sizing: border-box;
}
p {
text-align: center;
}
.container {
width: 1000px;
height: 450px;
border: 1px solid #666;
margin: 10px auto;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.container .nav {
width: 100%;
display: flex;
justify-content: space-between;
}
.container .nav a {
font-size: 20px;
}
.container .nav_1 {
padding: 0 100px;
}
.container .nav_2 {
padding: 0 200px;
}
.container .nav_3 {
padding: 0 300px;
}
.container .nav_4 {
padding: 0 400px;
}
.float_container {
width: 1000px;
height: 450px;
border: 1px solid #666;
margin: 10px auto;
}
.fl {
display: inline-block;
float: left;
}
.fr {
display: inline-block;
float: right;
}
.float_container .nav {
width: 100%;
height: 25%;
line-height: 112px;
}
.float_container .nav a {
font-size: 20px;
}
.float_container .nav_1 {
padding: 0 100px;
}
.float_container .nav_2 {
padding: 0 200px;
}
.float_container .nav_3 {
padding: 0 300px;
}
.float_container .nav_4 {
padding: 0 400px;
}
</style>
</head>
<body>
<p>flex布局：</p>
<div class="container">
<div class="nav nav_1">
<a href="https://bbs.csdn.net/topics/#">心情</a>
<a href="https://bbs.csdn.net/topics/#">心情</a>
</div>
<div class="nav nav_2">
<a href="https://bbs.csdn.net/topics/#">個人愛好</a>
<a href="https://bbs.csdn.net/topics/#">個人愛好</a>
</div>
<div class="nav nav_3">
<a href="https://bbs.csdn.net/topics/#">相冊</a>
<a href="https://bbs.csdn.net/topics/#">相冊</a>
</div>
<div class="nav nav_4">
<a href="https://bbs.csdn.net/topics/#">其他</a>
<a href="https://bbs.csdn.net/topics/#">其他</a>
</div>
</div>
<hr />
<p>float布局：</p>
<div class="float_container">
<div class="nav nav_1">
<a href="https://bbs.csdn.net/topics/#" class="fl">心情</a>
<a href="https://bbs.csdn.net/topics/#" class="fr">心情</a>
</div>
<div class="nav nav_2">
<a href="https://bbs.csdn.net/topics/#" class="fl">個人愛好</a>
<a href="https://bbs.csdn.net/topics/#" class="fr">個人愛好</a>
</div>
<div class="nav nav_3">
<a href="https://bbs.csdn.net/topics/#" class="fl">相冊</a>
<a href="https://bbs.csdn.net/topics/#" class="fr">相冊</a>
</div>
<div class="nav nav_4">
<a href="https://bbs.csdn.net/topics/#" class="fl">其他</a>
<a href="https://bbs.csdn.net/topics/#" class="fr">其他</a>
</div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/109738.html
標籤：HTML(CSS)
上一篇：InstallShield Limited Editon VS2015離線激活失敗
下一篇：請大佬幫個忙 不會寫JS