Question

我一直试图解决这个问题大约一个星期左右，我在这里寻求帮助作为最后的手段。我有网站，其中有动态构建无序列表，包含文本，复选框和两个按钮。每个按钮都有一个与之关联的图像。虽然按钮有效，但图像太大，甚至无法在列表中的单个“行”中显示。

我想要做的是使按钮图像略大于复选框，并在同一行上显示文本，复选框和两个按钮。我还想对齐复选框和按钮，同时保持文本左对齐。

这就是我在函数中动态添加复选框和按钮的方法：

//Create the checkbox to add to the list element
    var select_checkbox = document.createElement('input');
    select_checkbox.type = 'checkbox';
    select_checkbox.id = json[i].deck_ID;

    //Add the checkbox to the list element
    list_item.appendChild(select_checkbox);

        //Create the delete button to add to the list element
        var delete_button = document.createElement('button');
        delete_button.type = 'submit';
        delete_button.style = 'background-color:transparent; border-color:transparent;';
        delete_button.id = json[i].deck_ID;
        delete_button.name = "delete_deck";
        delete_button.class = "icon";
        delete_button_image = document.createElement('img');
        delete_button_image.src = 'icons/trashcan.png';
        delete_button.appendChild(delete_button_image);
        list_item.appendChild(delete_button);

        //Create the delete button to add to the list element
        var hide_button = document.createElement('button');
        hide_button.type = 'submit';
        hide_button.style = 'background-color:transparent; border-color:transparent;';
        hide_button.id = json[i].deck_ID;
        hide_button.name = (json[i].hidden=='1')?"unhide_deck":"hide_deck";
        hide_button.title = (json[i].hidden=='1')?"Unhide Deck":"Hide Deck";
        hide_button.class = "icon";
        hide_button_image = document.createElement('img');
        hide_button_image.src = 'icons/unhidden_eye.png';
        hide_button.appendChild(hide_button_image);
        list_item.appendChild(hide_button);

我已尝试按delete_button.setAttribute(...)设置固定的宽度和高度，但这并未改变大小。我也尝试在CSS中更改按钮大小，使用类似的样式来修复宽度和高度。我甚至试图缩小图像本身的大小，但无济于事。以下是HTML页面上列表的位置：

<div class="container" id="container">
    <div class="row" id="row">
        <div class="col-sm-4" id="faculty">
            <ul id="faculty_list" class="list-unstyled"></ul>
        </div>
        <div class="col-sm-4" id="student">
            <ul id="student_list" class="list-unstyled"> </ul>
        </div>
    </div>
</div>

我现在没有很多CSS用于无序列表：

ul{
    text-align: left;
}

Answer 1

看看这个JSFiddle：https://jsfiddle.net/timhjellum/jhdk2reg/

您需要设置按钮的宽度和高度，然后将背景图像设置为覆盖

.icon {
  width: 100px;
  height: 50px;
  background-image: url('http://placehold.it/350x150');
  background-size:cover;
  background-position: center;
  float: left;
  }

为什么HTML按钮图像不会缩小？

1 个答案: