html - 站点标题中 flex 元素的对齐方式
问题描述
有一个站点标题
#pageHeader {
grid-area: header;
width: 100%;
}
#pageHeader .headerinsides {
padding-left: 65px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: flex;
justify-content: space-between;
font: 18px "PT Sans", sans-serif;
z-index: 3;
}
.icon {
align-self: center;
}
#pageHeader .labelforicon {
padding-left: 10px;
align-self: center;
font: 18px "PT Sans", sans-serif;
/*white-space: pre;*/
}
.flexcitylink {
display: flex;
flex: 60px;
width: 100%;
}
.flexcitylinkwrapper {
display: flex;
}
.intermediatespace {
margin-left: auto;
flex: 30%;
}
.telephonenumber {
margin-left: auto;
flex: 30%;
border-bottom: 1px dashed black;
}
.addressandworkschedule {
margin-left: auto;
flex: 20%;
}
.payment {
margin-left: auto;
flex: 10%;
}
.delivery {
margin-left: auto;
flex: 10%;
}
#pageHeader .headerinsidessecondrow {
padding-left: 0px;
padding-right: 0px;
width: 100%;
height: 57px;
display: flex;
align-items: center;
font: 16px "PT Sans", sans-serif;
}
.catalogbutton {
margin-left: auto;
margin-right: auto;
flex: 22.5%;
height: 41px;
}
.betweenspace {
flex: 7.5%;
}
.inputsearch {
margin-left: auto;
flex: 80%;
height: 41px;
}
.searchbutton {
margin-left: auto;
flex: 20%;
height: 41px;
}
.findinfo {
flex: 40%;
display: flex;
justify-content: stretch;
}
.secondbetweenspace {
flex: 10%;
}
.loginandsignup {
margin-left: auto;
display: flex;
align-items: center;
flex: 10%;
display: flex;
justify-content: flex-start;
align-self: center;
cursor: pointer;
}
.loginandsignupinner {
}
.basket {
margin-left: auto;
/*margin-right: 0px;*/
display: flex;
align-items: center;
flex: 10%;
display: flex;
justify-content: flex-start;
align-self: center;
cursor: pointer;
}
<header id="pageHeader">
<div class="headerinsides">
<span class="flexcitylinkwrapper">
<a href="#" class="flexcitylink">
<span class="icon">
<svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
</span>
<span class="labelforicon">
Krasnodar
</span>
</a>
</span>
<span class="intermediatespace">
</span>
<span class="telephonenumber">
8 (800) 600 3900 (around the clock
)
</span>
<span class="addressandworkschedule">
Address and opening hours
</span>
<span class="payment">
Payment
</span>
<span class="delivery">
Delivery
</span>
</div>
<div class="headerinsidessecondrow" id="secondrowheader">
<button class="catalogbutton">Product catalog
</button>
<span class="betweenspace">
</span>
<span class="findinfo">
<input placeholder="Search among 10,000 products
" class="inputsearch"></input>
<button class="searchbutton">Find</button>
</span>
<span class="secondbetweenspace">
</span>
<span class="loginandsignup" id="loginlink">
<!--<div class="loginandsignupinner">-->
<div class="loginsignupimg">
<img src="../images/header_profile-icon.png">
</div>
<div class="loginsignuptext">
Login
</div>
<!--</div>-->
</span>
<span class="basket">
<span class="loginsignupimg">
<img src="../images/header_cart-icon.png">
</span>
<span class="loginsignuptext">
Basket
</span>
</span>
</div>
</header>
如何对齐网站标题的第一行和第二行(#pageHeader .headerinsides
和)?#pageHeader .headerinsidessecondrow
(最好在 flex 的帮助下)。要求交货和篮子在右边有相同的压痕。并且电话号码和地址以及工作时间表都对齐了,因此在设计方面看起来很漂亮。(为了方便查看结果,运行代码执行后,点击Full Page可以看到全尺寸的header。)
解决方案
推荐阅读
- outlook - 如果在 OWA 上使用稍后发送选项,Office.context.mailbox.item.SaveAsync 会在 Onsend 插件中引发错误
- java - 如何将值从活动传递到广播接收器?putExtra 对我不起作用
- python - db.session.commit() 在实例方法 flask sqlalchemy 中不起作用
- html - 日期管道格式问题
- ethereum - 以太坊如何进行 DAO 攻击?
- flutter - 从 listView 保存计数器值
- html - 尝试使用 Css 创建选项卡时出错?
- spring-boot - 在 SpringBoot 中,@JmsListener 如何以及何时被调用?
- javascript - 当我单击一个 div 然后它隐藏其他 div 时我想做
- rest - 我可以使用分块编码使用 Java REST API 下载巨大的静态文件吗?