【问题标题】:How do I Align Header on the same line using display?如何使用显示在同一行上对齐标题?
【发布时间】:2020-12-08 17:43:59
【问题描述】:

我使用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>

【问题讨论】:

  • 你的html结构完全错误

标签: html css display text-align


【解决方案1】:

.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>

【讨论】:

  • 你好@lightmyfire,试过这个,但仍然不适合我。可能做错了什么
猜你喜欢
  • 2019-11-04
  • 2019-04-30
  • 2015-01-16
  • 1970-01-01
  • 1970-01-01
  • 2022-08-21
  • 2021-11-24
  • 1970-01-01
  • 2011-04-14
相关资源
最近更新 更多