重新按钮

Question

的JavaScript

$(function(){
  $('.select-another-button').each(function(){
    $(this).bind('click', function(e) {
      $(this).attr('disabled','true'); //disables the button
      $('#overlay').show(); //after disabling show the overlay for hover
      setTimeout(function(){ 
        $(this).attr('disabled','false'); //enables after 5mins
        $('#overlay').hide(); //hide the overlay
      }, 300000);
      e.preventDefault();
      fileBrowser(this);
      return false;
    });
  });
});

$("#overlay").hover(function(){
    $('#message').show();
},function(){
    $('#message').hide();
});

HTML

<div class="card-title">
    <div class="title-actions">


        <a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button"
                data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9"
                data-reload="true" data-url="/documents/select/8/">
            <i class="material-icons">folder</i>
        </a>


        <a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button"
                data-turbolinks="false" data-url="/documents/upload/9/"
                data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1"
                style="position: relative; overflow: visible; direction: ltr;">
            <i class="material-icons">cloud_upload</i>
            <i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"><input
                        multiple="multiple" type="file" name="file"
                        style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></i>
        </a>
        <div class="wrapper">
            <div id="overlay"></div>
            <a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button"
                    data-url="/messaging/send/2/">
                <i class="material-icons">assignment_late</i>
                <div class="alert alert-success" id="send-message" style="display: none;">
                    <p>
                        The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
                    </p>
                </div>
            </a>
        </div>


        <a href="/admin/filer/folder/9/list/" class="btn-icon"><i class="material-icons">settings</i></a>

    </div>
    <h5>Request documents</h5>
</div>

CSS

.title-actions {
    float: right;
    height: 50px;
    margin-top: 13px;
}

.title-actions a {
    transition: background 0.3s ease;
}

.title-actions a.btn {
    padding: 2px 14px;
    line-height: 26px;
    max-height: 28px;
    position: relative;
    top: -1px;
    margin-left: 8px;
}

.title-actions a:hover {
    background: #4382B5;
}

.title-actions span {
    color: #444;
    background: #E6E6E6;
    padding: 6px 10px;
    border-radius: 3px;
    float: none;
    position: relative;
    margin-left: 6px;
}

.title-actions .btn {
    padding: 2px 14px;
    line-height: 26px;
    max-height: 28px;
    position: relative;
    top: -1px;
    margin-left: 8px;
}

.title-actions .btn-icon {
    background: transparent;
    position: relative;
    color: #3E5366;
    text-align: center;
    display: inline-block;
    padding: 0 !important;
    transition: color 0.3s ease;
    box-shadow: none !important;
    margin-top: -16px;
    margin-left: 6px;
}

.title-actions .btn-icon i {
    font-size: 35px;
    line-height: 20px;
    position: relative;
    top: 12px;
}

.title-actions .btn-icon:hover {
    color: #4382B5;
    background: transparent;
}

.title-actions .badge .material-icons {
    font-size: 1.2em;
    line-height: 0;
    position: relative;
    top: 4px;
}

在html块中，我添加了

<div class="wrapper">
            <div id="overlay"></div>
            <a href="#"
               title="{% trans "Send email - rejected file(s)" %}"
               class="btn btn-icon select-another-button"
               data-url="{% url "messaging:send" request_id=object.pk %}">
                <i class="material-icons">assignment_late</i>
                <div class='alert alert-success' id='send-message' style="display: none;">
                    <p>
                    The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
                    </p>
                </div>
            </a>
        </div>

事实上，我并没有添加任何东西。我刚刚添加了前两个div标签，我从这段代码中得到了一个不同按钮的问题。它将的旧行更改为的新行，但我甚至不知道如何修复它。我怎么能修改我的代码以带回两个旧的按钮行？我想我可以用CSS设计，但我不能说怎么做因为我没有很多经验。

Answer 1

.wrapper是一个块元素，所以它不会留在它的兄弟姐妹旁边。所有这些兄弟姐妹都.btn-icon设置了display: inline-block。您可以将.btn-icon添加到.wrapper元素，以便它显示inline-block（尽管它会继承剩余的.btn-icon个样式），或者只设置{{1}转到.wrapper（我做了什么）

display: inline-block;

.title-actions {
  float: right;
  height: 50px;
  margin-top: 13px;
}

.title-actions a {
  transition: background 0.3s ease;
}

.title-actions a.btn {
  padding: 2px 14px;
  line-height: 26px;
  max-height: 28px;
  position: relative;
  top: -1px;
  margin-left: 8px;
}

.title-actions a:hover {
  background: #4382B5;
}

.title-actions span {
  color: #444;
  background: #E6E6E6;
  padding: 6px 10px;
  border-radius: 3px;
  float: none;
  position: relative;
  margin-left: 6px;
}

.title-actions .btn {
  padding: 2px 14px;
  line-height: 26px;
  max-height: 28px;
  position: relative;
  top: -1px;
  margin-left: 8px;
}

.title-actions .btn-icon {
  background: transparent;
  position: relative;
  color: #3E5366;
  text-align: center;
  display: inline-block;
  padding: 0 !important;
  transition: color 0.3s ease;
  box-shadow: none !important;
  margin-top: -16px;
  margin-left: 6px;
}

.title-actions .btn-icon i {
  font-size: 35px;
  line-height: 20px;
  position: relative;
  top: 12px;
}

.title-actions .btn-icon:hover {
  color: #4382B5;
  background: transparent;
}

.title-actions .badge .material-icons {
  font-size: 1.2em;
  line-height: 0;
  position: relative;
  top: 4px;
}

.wrapper {
  display: inline-block;
}

Answer 2

对于您的问题，这可能是一个有点奇怪的答案。假设你想让他们成为最右边的4个小组。 （鉴于我没有完全使用mobile-html平台的经验）这是一个javascript，你可以用来消除奇怪的问题：

//this var is short and clean coded to help diagnose some issues
//for this example, you can store values as an array
//these arrays with your content will be used to make cloned sections
//with different icons
var
    icon = ["folder", "cloud", "case", "settings"],
    imgbg = ["folder.jpg", "cloud.jpg", "case.jpg", "setting.jpg"],
    frame = ""
;

for (i = 0; i < icon.length; i++) {
    frame += "<div class='" +
             icon[i] + 
             "'style='background-image:url(assets/" +
             imgbg[i] +
             ");'></div>"
    ;
    //which creates the code below as cloning
    //"<div class="icon[i]" style="background-image:url(imgbg[i]);"></div>"
}

document.getElementById("demo").innerHTML = frame; 
//this returns the clone code into a desired tml empty target like:
//<div id="demo"></div>
//then you can edit the css for float right as well as display top right
//to keep it at top right use this css
   .display-top-right{
       position:absolute;
       top:0;
       right:0;
       float:right;
       z-index:1;
   }