pタグの後で改行が行なわれないようにする

Question

ここにコードがありますが、破損している行から "送信"するのを防ぐ方法はありますか？アニメーションが機能しないため、pタグを変更することはできません。

.loader { 
 
    border: 16px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 16px solid blue; 
 
    border-right: 16px solid green; 
 
    border-bottom: 16px solid red; 
 
    width: 60px; 
 
    height: 60px; 
 
    -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); 
 
    } 
 
}

<p class="loader"></p> <span style="white-space:nowrap;"> Sending . . . </span>

Answer 1

1つのオプションはpとspanためラッパーを作成し、それフレキシボックスようにすることです - デモ下記を参照してください。

.wrapper { 
 
    display: flex; 
 
    align-items:center; 
 
} 
 
.loader { 
 
    border: 16px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 16px solid blue; 
 
    border-right: 16px solid green; 
 
    border-bottom: 16px solid red; 
 
    width: 60px; 
 
    height: 60px; 
 
    -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); 
 
    } 
 
}

<div class="wrapper"> 
 
    <p class="loader"></p> <span> Sending . . . </span> 
 
</div>

Answer 2

これを試してみてください：

.loader{ 
    float: left; 
} 

Answer 3

私はそれが `空白だuはここで、この

のようなCSSコード

span { 
    left: 29px; 
    position: absolute; 
    top: 50px; 
}