如何解决如何使用显示在同一行上对齐页眉?
我使用display: flex;
对齐了对象,现在我尝试使用text-align: justify;
和display: block;
将标头放在同一行上,但是仍然无法正常工作。我究竟做错了什么。有人可以帮忙吗?
.pos-container {
list-style: none;
padding-top: 40px;
padding-bottom: 60px;
display: block;
}
.pos-info {
display: inline-flex;
float: left;
}
.pos-info: before {
display: block;
height: 1px;
background-color: #045d71;
content: " ";
width: 90%;
margin: 0 auto;
}
.pos-image {
border-radius: 3px;
width: 47%;
height: 50%;
}
.pos-container i {
font-size: 180%;
color: #07a0c3;
margin-top: 150px;
margin-left: 40px;
display: block;
}
.pos-info h3 {
display: inline-block;
font-size: 110%;
text-align: left;
margin-left: 40px;
float: left;
column-width: auto;
}
.pos-content {
display: flex;
text-align: justify;
margin-top: 69px;
float: right;
margin-left: -118px;
margin-bottom: 80px;
}
.pos-content: after {
display: block;
height: 0.1px;
background-color: #045d71;
content: " ";
width: 90%;
margin: 0 auto;
}
<div class="row">
<ul class="pos-container">
<li class="pos-info">
<img class="pos-image" src="resources/img/cashier2.jpg" alt="pos picture">
<i class="ion-arrow-left-b"></i>
<h3>POS Software</h3>
<p class="pos-content">We offer a payment solution which functions on the cloud. It gives you access to your inventory,expenses,sales and operations from wherever you are located. It is designed for simplicity,so your employees won’t need any special training to use
the software. In case of a bad connection to the internet,the payment system will still work normally and would update every captured payment and transaction,once the connection is restored. A cheap and affordable solution for any type of restaurant,bar or lounge with available payment plans.
</p>
</li>
</ul>
</div>
解决方法
.wrapper {
display: flex;
}
.content {
margin-left: 40px;
}
h2 {
margin: 0;
}
<div class="wrapper">
<img src="http://via.placeholder.com/400x400" />
<div class="content">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。