标签：03 color float li ul ----- inline height left
昨天重做网页又遇到一个小细节问题，特此来记录。
首先还是先放代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style02.css">
</head>
<body>
<div class="header w">
<div class="logo"><img src="images02/logo.png" alt=""></div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<div class="search">
<input type="text" value="请输入关键词">
<button><img src="images02/search.png" alt=""></button>
</div>
<div class="user">
<img src="images02/user.png" alt="">
<p>qq-leishu</p>
</div>
</div>
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span</a></li>
<li><a href="#">前端开发<span>></span</a></li>
<li><a href="#">前端开发<span>></span</a></li>
<li><a href="#">前端开发<span>></span</a></li>
<li><a href="#">前端开发<span>></span</a></li>
<li><a href="#">前端开发<span>></span</a></li>
<li><a href="#">前端开发<span>></span</a></li>
<li><a href="#">前端开发<span>></span</a></li>
</ul>
</div>
<div class="course">
<h3>我的课程表</h3>
<div class="box">
<ul>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
</ul>
<a href="#" class="more">全部课程</a>
</div>
</div>
</div>
</div>
<div class="goods w">
<h3>精品推荐</h3>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
</ul>
<p>修改兴趣</p>
</div>
<div class="box01 w">
<div class="box01-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box01-bd">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<!-- <li></li>
<li></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f3f5f7;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.w {
width: 1205px;
margin: auto;
}
.header {
height: 40px;
margin: 30px auto;
/* background-color: pink; */
}
.header .logo {
float: left;
margin-right: 40px;
}
.header ul {
float: left;
}
.header ul li {
float: left;
padding-left: 20px;
}
.header ul li a {
display: block;
height: 41px;
padding: 0 10px;
line-height: 41px;
font-size: 18px;
color: #050505;
}
.header ul li a:hover {
border-bottom: 1px solid #004aff;
}
.search {
float: left;
width: 412px;
height: 42px;
margin-left: 88px;
/* background-color: blue; */
}
.search input {
float: left;
width: 360px;
height: 40px;
border: 1px solid #004aff;
border-right: 0;
/* vertical-align: middle; */
}
.search button {
width: 49px;
height: 42px;
border: none;
/* vertical-align: middle; */
}
.user {
float: right;
margin-right: 40px;
}
.user p {
float: right;
font-size: 14px;
color: #666;
}
.banner {
height: 420px;
background-color: #1c036c;
}
.banner .w {
height: 420px;
background: url(images/banner2.png) no-repeat top center;
}
.w .subnav {
float: left;
width: 193px;
height: 420px;
background-color: rgba(0, 0, 0, 0.3);
}
.subnav ul li {
padding: 0 20px;
}
.subnav ul li a {
height: 45px;
line-height: 45px;
font-size: 14px;
color: #fff;
}
.subnav ul li span {
float: right;
}
.subnav ul li a:hover {
color: #004aff;
}
.course {
float: right;
width: 235px;
height: 300px;
margin: 53px 0 69px 0;
background-color: pink;
}
.course h3 {
height: 45px;
line-height: 45px;
text-align: center;
font-size: 18px;
color: #fff;
background-color: #9bceea;
border-bottom: 1px solid #9bceea;
}
.box {
padding: 0 18px;
}
.box ul li h4 {
font-size: 14px;
color: #4e4e4e;
}
.box ul li p {
font-size: 12px;
color: #a5a5a5;
}
.box ul li {
padding: 13px 0;
border-bottom: 1px solid #a5a5a5;
}
.box .more {
display: block;
margin-top: 6px;
width: 200px;
height: 40px;
border: 1px solid #00a4ff;
font-size: 16px;
line-height: 40px;
text-align: center;
}
.goods {
height: 64px;
margin-top: 10px;
background-color: #fff;
box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.1);
}
.goods h3 {
float: left;
padding: 22px 32px;
font-size: 16px;
color: #004aff;
}
.goods ul li {
float: left;
padding: 22px 0;
}
.goods ul li a {
padding: 0 33px;
border-left: 1px solid #a5a5a5;
}
.goods p {
float: right;
padding: 25px 30px 25px 0;
font-size: 14px;
color: #004aff;
}
.box01 {
width: 1205px;
height: 3000px;
margin-top: 36px;
background-color: pink;
}
.box01-hd {
height: 33px;
}
.box01-hd h3 {
float: left;
font-size: 20px;
color: #494949;
}
.box01-hd a {
float: right;
font-size: 12px;
color: #a5a5a5;
padding: 12px 37px 22px 0;
}
.box01-bd {
width: 1205px;
}
/* .box01-bd ul {
float: left;
} */
.box01-bd ul li {
display: inline-block;
/* float: right; */
width: 229px;
height: 271px;
background-color: blue;
}
其结果是这样的,啊！！这是怎么一回事。
按照我之前设计的，粉色box01的下面bd，设计一个ul，并且在ul里面加入10个li,但是因为li是块元素，所以他不会横着排列，聪明的我，想到了把li转换成行内块元素（太蠢了，不想着浮动），于是乎就出现了这个情况，不知道怎么搞的，后来偶然在网上遇到一个也是自学前端的，请教了一下，才明白了怎么一回事。不过说来惭愧，你说同样是人，人家学的时间和我的一样，人家咋就能看出来自己硬是看不出来呢，恩，这件事值得自己反思。好吧，言归正传，原来是我的a标签“查看全部”给搞了一个浮动，导致那个box01-bd盒子的实际宽度小了（虽然也不能这么说吧）给ul也加个浮动就行了。
瞧见没，a的下边距啊，太大了，导致第5的li的宽度不够了，就被挤下来了呗。这么个问题还不如用浮动更简单。不过还是有所收获的，还是听了他的建议听了一下B站李江南老师的浮动流相关的内容，好的不要不要的，浮动又get到了新的知识点，尤其是浮动流基本概念那一节，真巧，就是用行内块元素这个内容引出的浮动流的概念的。
标签：03,color,float,li,ul,-----,inline,height,left 来源： https://blog.csdn.net/m0_47531829/article/details/115672950
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。