WinJS.BackButton 尺寸

Question

我有这个 html 标签，它引用了 WinJS 库提供的后退按钮：

<button data-win-control="WinJS.UI.BackButton"></button>

我想更改它的大小。我怎样才能做到这一点？我尝试通过添加 ID "backButton" 和字体大小或 width/height 属性来使用 CSS，如下所示：

#backButton {
    font-size: small;
}

#backButton {
    height: 30px;
    width: 30px;
}

编辑：添加的代码和更改按钮 width/height 值时发生的情况的图片。

// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/anime/anime.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            this.renderAnimeInfo(Identifier.file);
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        },

        renderAnimeInfo: function (id) {
            // Path for the anime data.
            var path = "data/animes.json";

            // Retrieve the .json.
            WinJS.xhr({ url: path }).then(
                function (response) {
                    var json = JSON.parse(response.responseText);
                    
                    for (var i = 0; i < json.length; i++) {
                        if (json[i].file == id) {
                            var animeData = json[i];
                            break;
                        }
                    }
                },
                function (error) {},
                function (progress) {}
                );
        },


    });
})();

.right {
    float: right;
}

.left {
    float: left;
}

.active {
    background-color: blue;
}

#animeDetails {
    background: red;
    height: 100%;
    width: 300px;
    float: left;
}

#animeInfo {
    display: -ms-grid;
    height: 100%;
    width: calc(100% - 300px);
    float: right;
}

#navbar {
    -ms-grid-row: 1;
    padding: 20px 25px;
}

#navbar .right button {
    margin-right: 4px;
}

#navbar input {
    width: 150px;
}

#details {
    -ms-grid-row: 2;
    padding: 0 25px;
    text-align: justify;
    white-space: pre-line;
}

#details h3 {
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #bebebe;
    margin-bottom: 0;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>anime</title>

    <link href="anime.css" rel="stylesheet" />
    <script src="anime.js"></script>
</head>
<body>
    <div id="animeDetails"></div>

    <div id="animeInfo">
        <div id="navbar">
            <div class="left">
                <button class="left" data-win-control="WinJS.UI.BackButton"></button>
                <h3>Back</h3>
            </div>
            <div class="right">
                <button type="button" class="active">Details</button>
                <button type="button">Episodes</button>
                <button type="button">Characters</button>
                <button type="button">Staff</button>
                <input type="search" placeholder="Search" />
            </div>
        </div>

        <div id="details">
            <div id="synopsis">
                <h3>Synopsis</h3>
                <span>
                </span>
            </div>
        </div>
    </div>
</body>

当使用 width/height 属性时，发生的情况是按钮会调整到指定值，但内部图标（不是背景）不会。 http://i.imgur.com/lMqmL0G.png

Answer 1

您还没有为按钮指定 ID。 CSS不知道要link给什么标签。

<button id="backButton" data-win-control="WinJS.UI.BackButton"></button>

编辑：您可能会发现以下参考有用 CSS Selectors

Answer 2

可能您必须将 display: inline-block 设置为 button 因为具有 display: inline 的元素的宽度（buttons 的默认值）与其内容完全相同因为它只占用显示其内容所需的 space 所以尝试使用：

带id选择器

 #backButton {
        height: 30px;
        width: 30px;
        display: inline-block;
}

<button id="backButton" data-win-control="WinJS.UI.BackButton"></button>

内联样式

<button data-win-control="WinJS.UI.BackButton" style="width: 30px; height: 30px; display: inline-block"></button>

尝试为子元素设置样式.win-back

#backButton .win-back{
     /*---styles---*/
}

WinJS.BackButton 尺寸

WinJS.BackButton sizes

html

css

winjs