html - 如何在CSS中水平排列形状并在右上角显示文本

Question

我有 3 个盒子要排成一行..

 .box {
        width: 50px;
        height: 50px;
        background: #8C8C8C;
      margin:0 auto;
      border: solid 4px grey;
    text-align: center;
    display:block;


      }

显示 inlineblock 不工作它也杀死居中

HTML

<div class="box"(click)="boxnumber('1')" >


      <p class="count1">{{item1count}}<p>
  </div>

  <br>
  <div class="box" (click)="boxnumber('2')" >
    <p class="count2">{{item2count}}<p>

  </div>
  <br>
  <div class="box" (click)="boxnumber('3')" >
    <p class="count3">{{item3count}}<p>

  </div>

我还尝试在每个框的右下角显示 item1count、item2count、item3count 数字。count1 count2 css 类现在是空的，因为我不确定要在其中写什么。

boxes

Answer 1

尝试将 css margin: 0px auto; 添加到您的 .box 以使其居中。

试试这个:

.box{
  width:50px;
  height: 50px;
  border: 2px solid red;

  margin: 15px auto;
  display: table;
}

要在右上角显示数字，您需要添加垂直对齐方式，如下所示:

.box p{
  vertical-align:bottom;
  display: table-cell;
}

你可以看看我的plunkr here