使用css在按鈕旁邊添加加載影像

我試圖將加載影像（CSS）對齊到按鈕旁邊。我從STO幫助中嘗試了一下，但影像仍然沒有出現在按鈕旁邊。

這里是Jsfiddle

。

#loading-bar-spinner.spinner {
  left: 50%;
  margin-left: -20px;
  top: 50%;
  margin-top: -20px;
  position: absolute;
  z-index: 19 ！重要。
  animation: Loading-bar-spinner 400ms linear infinite;
}

#loading-bar-spinner.spinner .spinner-icon{
  width: 20px;
  height: 20px;
  border: solid 4px transparent;
  border-top-color: #E4002B ！ important。
  border-left-color: #E4002B ！ important;
  border-radius: 50%;
  float: left;
}

@keyframes loading-bar-spinner {
  0% {
    transform: 旋轉(0deg)。
    transform: rotate(0deg)。
  }
  100% {
    transform: rotate(360deg)。
    transform: rotate(360deg)。
  }
}

< form name="sample_data" class="form2"> 
  <label for="fname"/span>> 名字</label>。
  < input name="fname" id="fname_id" type="text"> <br />>
  <label for="lname"/span>> 最后一個名字</label>。
  < input name="lname" id="lname_id" type="text"> 
  < input type="submit"/span> class="sfmc_btn" id="subm_sfmc" value="submit"> 
  < div id="loading-bar-spinner" class="spinner"> 
    <div class="spinner-icon"/span>> </div>>
  </div>/span>
</form>/span>

<iframe name="sif1" sandbox="allow-form allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

#loading-bar-spinner.spinner {
    display: inline-block;
    影片: Loading-bar-spinner 400ms linear infinite;
    }

    #loading-bar-spinner.spinner .spinner-icon {
        width: 12px;
        高度：12px。
        border: solid 3px transparent;
        border-top-color: aliceblue;
        border-left-color: #E4002B !important;
        border-bottom-color: #E4002B;
        border-radius: 50%;
        浮動：左。
    }

uj5u.com熱心網友回復：

解決方案是將按鈕和旋轉器一起包入一個顯示inline-block的元素，然后將旋轉器本身包入一個顯示inline block的元素。

請看Jsfiddle

。

$(document).ready(
  $(function() {
    $("#loading-bar-spinner").show() 。
    $('form:not(.form2)').submit(function(e) {
      e.preventDefault（）。
      if ($(".form1").validate().checkForm() {
        $(this).find('input[type=submit]') 。 prop('disabled', true) 。
        $(this).find('input[type=submit]') 。 prop('value', '請等待...')。
      }
    });

    $(".form2"/span>).submit(function(e) {
      e.preventDefault（）。
      if ($(".form2").validate().checkForm() {
        $(this).find('input[type=submit]') 。 prop('disabled', true) 。
        //$(this).find('input[type=submit]').prop('value', 'submit');/span>
        $("#loading-bar-spinner"/span>).show()。
      }
    });
  })
);

#loading-bar-spinner.spinner {
  /* left: 50%; */
  /* margin-left: -20px; */
  top: 50%;
  margin-top: -20px;
  position: absolute;
  z-index: 19 ！重要。
  animation: Loading-bar-spinner 400ms linear infinite;
}

#loading-bar-spinner.spinner .spinner-icon{
  width: 20px;
  height: 20px;
  border: solid 4px transparent;
  border-top-color: #E4002B ！ important。
  border-left-color: #E4002B ！ important;
  border-radius: 50%;
  float: left;
}

@keyframes loading-bar-spinner {
  0% {
    transform: 旋轉(0deg)。
    transform: rotate(0deg)。
  }

  100% {
    transform: rotate(360deg)。
    transform: rotate(360deg)。
  }
}

.sfmc_btn > *{
  border:1px solid red;
}

.wrap, .spinner {
  display: inline-block;
  position: relative;
}

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<script src="https://ajax.aspnetcdn. com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>/span>
< form name="email" class="form1""form1" action=" method="post"> 
  <label for="email"/span>> 您的電子郵件</label>/span>
  < input name="Email" id="email"/span> type="email"/span>> 
  < input type="submit" value="submit"> 
</form>< br /><br />>
<h2> 
  測驗表格
</h2>測驗表格
< form name="sample_data" class="form2"> 
  <label for="fname"/span>> 名字</label>。
  < input name="fname" id="fname_id" type="text"> <br />>
  <label for="lname"/span>> 最后一個名字</label>。
  < input name="lname" id="lname_id" type="text"> 
  <div class="wrap"> 
  
  < input type="submit"/span> class="sfmc_btn" id="subm_sfmc" value="submit"> 
  <div class="spinner"> 
    < div id="loading-bar-spinner" class="spinner"> 
        <div class="spinner-icon"/span>> </div>>
    </div>/span>
  </div>/span>
  </div>/span>
  
</form>/span>

<iframe name="sif2" sandbox="allow-form allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

所做的改動見代碼中的注釋。

。

#loading-bar-spinner.spinner {
  left: 50%;
  /* margin-left: -20px; */ 
  top: calc(50% - 3px); /* <-------- Used calc to position verticalically */
  /* margin-top: -20px; */.
  position: absolute;
  z-index: 19 ！ important;
  animation: Loading-bar-spinner 400ms linear infinite;
}

#loading-bar-spinner.spinner .spinner-icon{
  width: 20px;
  height: 20px;
  border: solid 4px transparent;
  border-top-color: #E4002B ！ important。
  border-left-color: #E4002B ！ important;
  border-radius: 50%;
  float: left;
}

.form2 { /* added to allow */.
  position: relative; /* positioning within */
}                     /* 此元素 */ *

@keyframes loading-bar-spinner {
  0% {
    transform: 旋轉(0deg)。
    transform: rotate(0deg)。
  }
  100% {
    transform: rotate(360deg)。
    transform: rotate(360deg)。
  }
}

< form name="sample_data" class="form2"> 
  <label for="fname"/span>> 名字</label>。
  < input name="fname" id="fname_id" type="text"> <br />>
  <label for="lname"/span>> 最后一個名字</label>。
  < input name="lname" id="lname_id" type="text"> 
  < input type="submit"/span> class="sfmc_btn" id="subm_sfmc" value="submit"> 
  < div id="loading-bar-spinner" class="spinner"> 
    <div class="spinner-icon"/span>> </div>>
  </div>/span>
</form>/span>

<iframe name="sif3" sandbox="allow-form allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

<style>

    #loading-bar-spinner.spinner {
        position: absolute;
        animation: loading-bar-spinner 400ms linear infinite;
    }

    #loading-bar-spinner.spinner .spinner-icon{
        width: 20px;
        height: 20px;
        border: solid 4px transparent;
        border-top-color: #E4002B ！ important。
        border-left-color: #E4002B ！ important;
        border-bottom-color: #E4002B ！ important;
        border-radius: 50%;
        float: left;
     }

@keyframes loading-bar-spinner {
   0% {
      transform: 旋轉(0deg)。
      transform: rotate(0deg)。
    }

   100% {
     transform: rotate(360deg)。
     transform: rotate(360deg)。
    }
   }

</style>

<body> 
    < form name="sample_data" class="form2"> 
        <label for="fname"/span>> 名字</label>。
        < input name="fname" id="fname_id" type="text"> <br />>
        <label for="lname"/span>> 最后一個名字</label>。
        < input name="lname" id="lname_id" type="text"> 

        <div style=" top:25px ; left:280px ; position: fixed; widht:100px;" > 
                <div style=" float:left;" >
                        < input type="submit"/span> class="sfmc_btn" id="subm_sfmc" value="submit"> 
                </div>/span>
                    
                        
            
                <div style="float: right; margin-left: 10px;" >
                    < div id="loading-bar-spinner" class="spinner"> 
                        <div class="spinner-icon"/span>>
                    </div>/span>
                </div>/span>

        </div>/span>
        
            
      </div>/span>
    </form> 
</body>/span>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

試試這個！

uj5u.com熱心網友回復：

將按鈕和用于旋轉器的 div 圍繞在一個父 div 中。給它一個類名。然后在你的css中，給這個類一個flex的顯示，像這樣；

<div class"wrapper" >/span>
      <input type="submit"..../>/span>
      < div id="loading-bar-spinner" class="spinner"> 
           <div class="spinner-icon"/span>> </div>>
       </div>/span>
</div>/span>

現在給wrapper一個flex的顯示，讓它像這樣把孩子們挨在一起定位；

.wrapper{
     display: flex;
 } 

你也可以閱讀關于flex專案的justify-content和align-item，以根據需要定位子元素。 注：請不要介意我的回復格式不佳，我是用手機輸入的

。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/333723.html

標籤：

上一篇：如何將int陣列轉換為整數

下一篇：當其中一個改變時，匹配兩個文本區域元素的大小