简单的CSS微调器可用作DIV，但不能用作SPAN（或嵌入式DIV）

Question

我需要一个微调器，基本上可以将其插入到段落文本的中间。 我以想要它作为块显示元素（div）的方式使用了微调器，但是当我尝试将其创建为跨度（或将div更改为内联）时，微调器不起作用。

如何修改此微调器，以便可以将其放入句子的中间（即段落文本）？

 #loader { float: left; width: 10px; height: 10px; margin-right: 5px; margin-top: 2px; border: 2px solid #f3f3f3; border-radius: 50%; border-top: 2px solid #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loaderInline { display: inline; width: 10px; height: 10px; margin-right: 5px; margin-top: 2px; border: 2px solid #f3f3f3; border-radius: 50%; border-top: 2px solid #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Add animation to "page content" */ .animate-bottom { position: relative; -webkit-animation-name: animatebottom; -webkit-animation-duration: 1s; animation-name: animatebottom; animation-duration: 1s } @-webkit-keyframes animatebottom { from { bottom: -100px; opacity: 0 } to { bottom: 0px; opacity: 1 } } @keyframes animatebottom { from { bottom: -100px; opacity: 0 } to { bottom: 0; opacity: 1 } } 

 <p> <div id="loader"></div>Works as normal DIV </p> <p> <div id="loaderInline"></div>Broken as DIV with inline display </p> 

Answer 1

inline元素不能调整大小， inline-block ， inline-flex或inline-table都可以，并且不能作为内联框进行交互。

 #loader { float: left; width: 10px; height: 10px; margin-right: 5px; margin-top: 2px; border: 2px solid #f3f3f3; border-radius: 50%; border-top: 2px solid #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loaderInline { display: inline-block; width: 10px; height: 10px; margin-right: 5px; margin-top: 2px; border: 2px solid #f3f3f3; border-radius: 50%; border-top: 2px solid #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Add animation to "page content" */ .animate-bottom { position: relative; -webkit-animation-name: animatebottom; -webkit-animation-duration: 1s; animation-name: animatebottom; animation-duration: 1s } @-webkit-keyframes animatebottom { from { bottom: -100px; opacity: 0 } to { bottom: 0px; opacity: 1 } } @keyframes animatebottom { from { bottom: -100px; opacity: 0 } to { bottom: 0; opacity: 1 } } 

 <p> <div id="loader"></div>Works as normal DIV </p> <p> <div id="loaderInline"></div>Broken as DIV with inline display </p> 

---

您也可以使用伪:before / ::before和inline-block ：

 #loader { float: left; width: 10px; height: 10px; margin-right: 5px; margin-top: 2px; border: 2px solid #f3f3f3; border-radius: 50%; border-top: 2px solid #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } p:before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; margin-top: 2px; border: 2px solid #f3f3f3; border-radius: 50%; border-top: 2px solid #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Add animation to "page content" */ .animate-bottom { position: relative; -webkit-animation-name: animatebottom; -webkit-animation-duration: 1s; animation-name: animatebottom; animation-duration: 1s } @-webkit-keyframes animatebottom { from { bottom: -100px; opacity: 0 } to { bottom: 0px; opacity: 1 } } @keyframes animatebottom { from { bottom: -100px; opacity: 0 } to { bottom: 0; opacity: 1 } } 

 <p> an inline-block pseudo works too; </p>