Question

我有一个问题：我想要我的文字＆＃34; left＆＃34;向左走，我的文字＆＃34;对＆＃34;走向正确，希望他们都在同一条线上。我在CSS中添加了text-align，但它不起作用。我还添加了display:inline-block，因此2个不同的divs可以在同一行。我还想在网站的边框和文本之间添加边距。我在CSS中尝试width:90%，但文本又在同一行。

My Problem

这是我的HMTL代码

<div class="footer">
   <div class="footerleft">
      <p>Left1</p>
      <p>Left2</p>
      <p>Left3</p>
   </div>
   <div class="footerright">
      <p>RIght1</p>
      <p>RIght2</p>
      <p>RIght3</p>
   </div>
</div>

这是我的CSS代码：

.footer {
     position:absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     background-color: #160a70;
     color: white;
}
 .footerright {
     text-align: left;
     display: inline-block;
}
 .footerleft {
     text-align: right;
     display: inline-block;
}

Answer 1

text-align对您的案例没有任何影响，因为父级宽度是自您设置display:inline-block以来子内容的宽度。文本已经接近两边。

在这种情况下最简单的解决方案是使用float并简单地向主容器添加填充以在边框之间创建空间。同时使用width:100%更改right:0以避免溢出：

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  right:0;
  background-color: #160a70;
  color: white;
  padding:20px; /* For spacing */
}

.footerright {
  float: right;
  display: inline-block;
}

.footerleft {
  display: inline-block;
}

<div class="footer">
  <div class="footerleft">
    <p>Left1</p>
    <p>Left2</p>
    <p>Left3</p>
  </div>


  <div class="footerright">
    <p>RIght1</p>
    <p>RIght2</p>
    <p>RIght3</p>
  </div>
</div>

或者考虑使用更好的flex：

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  right:0;
  padding:20px;
  background-color: #160a70;
  color: white;
  display:flex;
}

.footerright {
  text-align: right;
  flex:1;
}

.footerleft {
  text-align: left;
  flex:1;
}

<div class="footer">
  <div class="footerleft">
    <p>Left1</p>
    <p>Left2</p>
    <p>Left3</p>
  </div>


  <div class="footerright">
    <p>RIght1</p>
    <p>RIght2</p>
    <p>RIght3</p>
  </div>
</div>

或者为元素添加宽度，不要忘记以清除whitespace：

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  right:0;
  padding:20px;
  background-color: #160a70;
  color: white;
  display: inline-block;
  font-size: 0;
}

.footerright {
  font-size: initial;
  text-align: right;
  width: 50%;
  display: inline-block;
}

.footerleft {
  font-size: initial;
  text-align: left;
  width: 50%;
  display: inline-block;
}

<div class="footer">
  <div class="footerleft">
    <p>Left1</p>
    <p>Left2</p>
    <p>Left3</p>
  </div>


  <div class="footerright">
    <p>RIght1</p>
    <p>RIght2</p>
    <p>RIght3</p>
  </div>
</div>

text-align footer HTML CSS

1 个答案: