html – 表内的Loader

概述我试图将加载器放在一个表中,但它不起作用.问题是当我将div放在td中时,表格格式不起作用. 当我检查元素时,div在表格之外. .loader { background: #000; background: radial-gradient(#222, #000); bottom: 0; left: 0; overflow: hidden; position: fixed; 我试图将加载器放在一个表中,但它不起作用.问题是当我将div放在td中时,表格格式不起作用.

当我检查元素时,div在表格之外.

.loader {  background: #000;  background: radial-gradIEnt(#222,#000);  bottom: 0;  left: 0;  overflow: hIDden;  position: fixed;  right: 0;  top: 0;  z-index: 99999;}.loader-inner {  height: 60px;  left: 0;  position: absolute;  right: 0;  wIDth: 100px;}.loader-line-wrap {  animation: spin 2000ms cubic-bezIEr(.175,.885,.32,1.275) infinite;  Box-sizing: border-Box;  height: 50px;  left: 0;  overflow: hIDden;  position: absolute;  top: 0;  transform-origin: 50% 100%;  wIDth: 100px;}.loader-line {  border: 4px solID transparent;  border-radius: 100%;  Box-sizing: border-Box;  height: 100px;  left: 0;  margin: 0 auto;  position: absolute;  right: 0;  top: 0;  wIDth: 100px;}.loader-line-wrap:nth-child(1) {  animation-delay: -50ms;}.loader-line-wrap:nth-child(2) {  animation-delay: -100ms;}.loader-line-wrap:nth-child(3) {  animation-delay: -150ms;}.loader-line-wrap:nth-child(4) {  animation-delay: -200ms;}.loader-line-wrap:nth-child(5) {  animation-delay: -250ms;}.loader-line-wrap:nth-child(1) .loader-line {  border-color: hsl(0,80%,60%);  height: 90px;  wIDth: 90px;  top: 7px;}.loader-line-wrap:nth-child(2) .loader-line {  border-color: hsl(60,60%);  height: 76px;  wIDth: 76px;  top: 14px;}.loader-line-wrap:nth-child(3) .loader-line {  border-color: hsl(120,60%);  height: 62px;  wIDth: 62px;  top: 21px;}.loader-line-wrap:nth-child(4) .loader-line {  border-color: hsl(180,60%);  height: 48px;  wIDth: 48px;  top: 28px;}.loader-line-wrap:nth-child(5) .loader-line {  border-color: hsl(240,60%);  height: 34px;  wIDth: 34px;  top: 35px;}@keyframes spin {  0%,15% {    transform: rotate(0);  }  100% {    transform: rotate(360deg);  }}

<table>  <tr>    <td>1</td>  </tr>  <tr>    <td>      <div ID="preloader" >        <div >          <div >            <div ></div>          </div>          <div >            <div ></div>          </div>          <div >            <div ></div>          </div>          <div >            <div ></div>          </div>          <div >            <div ></div>          </div>        </div>      </div>    </td>  </tr></table>

解决方法 如果您需要在< td>中包含加载图形那么你不应该使用固定定位.

这是一个解决方案.删除固定的定位和相关属性.将定位设置为相对以及.loader的高度和宽度.

.loader {  position: relative;  background: #000;  background: radial-gradIEnt(#222,#000);  overflow: hIDden;  z-index: 99999;  wIDth: 100px;  height: 100px;}.loader-inner {}.loader-line-wrap {  animation: spin 2000ms cubic-bezIEr(.175,15% {    transform: rotate(0);  }  100% {    transform: rotate(360deg);  }}table td {  border: 1px solID #CCC;}

<table>  <tr>    <td>1</td>  </tr>  <tr>    <td>      <div ID="preloader" >        <div >          <div >            <div ></div>          </div>          <div >            <div ></div>          </div>          <div >            <div ></div>          </div>          <div >            <div ></div>          </div>          <div >            <div ></div>          </div>        </div>      </div>    </td>  </tr></table>

总结

以上是内存溢出为你收集整理的html – 表内的Loader全部内容，希望文章能够帮你解决html – 表内的Loader所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。