麻烦老师解答，谢谢
来源：2-1 浮动的基本概念
dww1
2021-06-27 07:28:58
<style>
/* .box1{
width: 880px;
height: 200px;
border:1px solid orange;
}
.box2{
width: 660px;
height: 200px;
border:1px solid orange;
} */
span{
float: left;
width: 200px;
height: 200px;
background-color: #0f0;
margin-right: 20px; /*margin-right:60px*/或/*margin-right:40px*/
}
a{
float: left;
width: 200px; /*width:300px*/
height: 30px;
background-color: red;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="box1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="box2">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
</div>
像这种情况 a和span是行内元素，会实现并排，设置了左浮动，都会实现并排，但是a标签进行了换行，是因为页面宽度的关系导致的吗？ 有没有什么方法可以避免这种情况
自己也尝试了 调整span的margin-right的数值大小，或a和span一起调整数值，又或者给a和span添加一个盒子 并赋予宽度 就可以实现浮动
1回答
-
好帮手慕言
2021-06-27
同学你好，解答如下：
1、页面宽度较小会导致a标签换行，可以设置一个最小宽度解决换行的这个问题，例如：
设置之后，页面底部会出现横向滚动条，拖动滚动条，可以查看页面的完整内容
2、span和a外层添加一个父盒子并设置浮动的话，浏览器宽度较大的情况下，两个div可以在一行显示，如果浏览器宽度较小的情况下，会出现如下形式的换行
margin-right值调小之后，页面可以放下a和span的时候，就可以并排显示。
祝学习愉快~
0
相似问题