flex布局问题
0
[已解决问题]
解决于 2019-12-25 15:27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.d1{
width: 100%;
border: red solid 1px;
}
.d2{
width: 90%;
border: red solid 1px;
margin: 0 auto;
}
.d2 img{
height: 30px;
padding: 15px 15px 15px 15px;
border: redb solid 1px;
margin-left: 6%;
}
.c3{
width: 20%;
border: 1px solid red;
text-align: center;
}
.d4{
height:0px;
}
.d4 input{
height: 24px;
margin-top:-5px;
width: 170px;
}
.d5{
width: 75%;
display:flex;
flex-wrap:nowrap
margin: 0 auto;
margin-top: 20px;
justify-content: flex-end;
}
.d5 a{
text-decoration: none;
}
.d5 div{
float: right;
margin-left: 30px;
}
.d2{
display:flex;
flex-wrap:nowrap
}
.d6{
display:flex;
flex-wrap:nowrap
margin-left:20px;
}
.d7 img{
margin-left:-30px;
margin-top: -2.4px;
}
.d9{
width: 50px;
height: 1px;
border: #19AFF1 solid 1px;
background-color: #19AFF1;
}
.c10{
width: 50px;
height: 1px;
border: #19AFF1 solid 1px;
background-color: #19AFF1;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<div class="c3"><img src="img/logo.png" ></div>
<div class="d5">
<div>
<a href="">智能择校</a><br>
<span class="d9"></span>
</div>
<div>
<a href="">快速选择学院</a><br>
<span class="c10"></span>
</div>
<div class="d4"><input type="text" name="" id="" value="" placeholder="正在输入的内容"/></div>
<div class="d7">
<a href=""><img src="img/imag2/fdj.png" style="padding: 0px 0px 0px 0px !important;"></a>
</div>
<div class="d6">
<div>注册</div>
<div style="color:#C0C0C0;margin-left: 20px;margin-right:-10px;">|</div>
<div>登录</div>
</div>
</div>
</div>
</div>
</body>
</html>
以上是我的代码，为什么这两个span是竖着的，我想变为横向而不错位，想请教一下 这个应该怎么改，我用了flex
最佳答案
1
父元素宽度决定了子元素的总宽度
// html
<div class="d99">
<a href="">智能择校</a><br>
<span class="d9">00</span>
</div>
<div class="c1010">
<a href="">快速选择学院</a><br>
<span class="c10">90</span>
</div>
//css
.d99, .c1010{
display: flex;
flex-direction: rew;
}他们父元素的宽度你自己调把
奖励园豆：5
谢谢 可以了现在
你好，我想问一下 flex-direction: rew;这是什么意思呢
@小白萝卜呀: flex布局你要弄清楚主轴交叉轴的概念，其他用多了就知道了，flex-direction: rew是 决定主轴的方向，这个也是默认的，可以不写，建议你看看这个 https://zhuanlan.zhihu.com/p/25303493
你这个代码部分，使用代码块处理一下。
– hellotim 4年前@hellotim: 你好，我这个第一次使用，具体处理方法我不太懂，能麻烦您教我一下吗
– 小白萝卜呀 4年前@小白萝卜呀: 博问的提问默认 Markdown 编辑器，你可以先了解一下 Markdown 语法以便更好的提问。https://www.runoob.com/markdown/md-code.html
– hellotim 4年前