Question

我有3个盒子，我试图排队..

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


      }

显示内联块不起作用，它也会杀死居中

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>

另外我想在每个box.count1上显示item1count，item2count，item3count数字.count2 css类现在是空的，因为我不确定在它们中写什么。

boxes

Answer 1

只需删除br代码，然后将display:block替换为inline-block

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

<div class="boxes">
<div class="box"(click)="boxnumber('1')" >
      <p class="count1">{{item1count}}<p>
  </div>
  <div class="box" (click)="boxnumber('2')" >
    <p class="count2">{{item2count}}<p>

  </div>
  <div class="box" (click)="boxnumber('3')" >
    <p class="count3">{{item3count}}<p>

  </div>
  </div>

Answer 2

尝试将{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

Answer 3

试试这个：

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style>
    .box {
        width: 50px;
        height: 50px;
        background: #8C8C8C;
       float: left;
       margin-right:10px;
      border: solid 4px grey;
    text-align: center;
      }
      .box-container{
        width:204px; /* 50*3+(4*2)*3+10*3 */
        margin:0 auto;
      }
    </style>
</head>
<body>
<div class="box-container">
<div class="box"(click)="boxnumber('1')" >


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


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

  </div>

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

  </div>
</div>


</body>
</html>

如何在css中横向排列形状并在左下角显示文本

3 个答案: