Question

在以下代码段中，您可以看到h2和动画之间的空格。我希望将其删除，该怎么办？

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}


/* Safari */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

h2 {
  text-align: center;
}

<h2>xyzxyzxyzxyz.
  <div class="loader" style="float:right;"></div>
</h2>

JSFIDDLE：https://jsfiddle.net/wdzLv7tk/

Answer 1

只需使用text-align: right代替text-align: center

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
h2 {
text-align: right;
}

<h2>xyzxyzxyzxyz.<div class="loader" style="float:right;"></div></h2>

Answer 2

Float:right引起了问题。有很多方法可以使元素并排放置。我应用了其中之一。在这里，我有display:table个父元素，每个孩子都有display:table-cell个问题的解决方案。

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}

.parent {
  display: table;
  margin:auto;
}

.child {
  display: table-cell;
}

h2 {}


/* Safari */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

h2 {
  text-align: center;
}

<div class="parent">
  <h2 class="child">xyzxyzxyzxyz.</h2>
  <div class="loader child" style=""></div>
</div>

删除<h2>和CSS动画之间的空白

2 个答案: