WinJS.BackButton尺寸

时间:2015-07-23 05:46:21

标签: html css winjs

我有这个html标签,它引用了WinJS库提供的backButton:

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

我想改变它的大小。我怎样才能做到这一点?我尝试使用CSS添加ID“backButton”和font-size OR width / height属性,如下所示:

#backButton {
    font-size: small;
}

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

编辑:添加了代码,以及更改按钮宽度/高度值时会发生什么的图片。

// 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

2 个答案:

答案 0 :(得分:1)

可能您必须将display: inline-block设置为button,因为带有display: inlinebuttons的默认值)的元素的宽度与其内容完全相同,因为它只占用显示其内容所需的空间,所以请尝试:

使用ID选择器

&#13;
&#13;
 #backButton {
        height: 30px;
        width: 30px;
        display: inline-block;
}
&#13;
<button id="backButton" data-win-control="WinJS.UI.BackButton"></button>

   
&#13;
&#13;
&#13;

内联样式

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

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

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

答案 1 :(得分:0)

您没有为您的按钮指定ID。 CSS不知道链接到哪个标签。

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

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