首页新闻找找看学习计划

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

小白萝卜呀的主页 小白萝卜呀 | 初学一级 | 园豆:8
提问于:2019-12-25 12:27

你这个代码部分,使用代码块处理一下。

hellotim 2个月前

@hellotim: 你好,我这个第一次使用,具体处理方法我不太懂,能麻烦您教我一下吗

小白萝卜呀 2个月前

@小白萝卜呀: 博问的提问默认 Markdown 编辑器,你可以先了解一下 Markdown 语法以便更好的提问。https://www.runoob.com/markdown/md-code.html

hellotim 2个月前
< >
分享
最佳答案
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
学会乐观 | 小虾三级 |园豆:702 | 2019-12-25 15:18

谢谢 可以了现在

小白萝卜呀 | 园豆:8 (初学一级) | 2019-12-25 15:27

你好,我想问一下 flex-direction: rew;这是什么意思呢

小白萝卜呀 | 园豆:8 (初学一级) | 2019-12-25 15:43

@小白萝卜呀: flex布局你要弄清楚主轴交叉轴的概念,其他用多了就知道了,flex-direction: rew是 决定主轴的方向,这个也是默认的,可以不写,建议你看看这个 https://zhuanlan.zhihu.com/p/25303493

学会乐观 | 园豆:702 (小虾三级) | 2019-12-25 15:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册