我有这个 html 标签，它引用了 WinJS 库提供的后退按钮:
<button data-win-control="WinJS.UI.BackButton"></button>
我想改变它的大小。我怎样才能做到这一点？我尝试通过添加 ID“backButton”和字体大小或宽度/高度属性来使用 CSS，如下所示:
#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
最佳答案
可能您必须将 display: inline-block 设置为 button 因为带有 display: inline 的元素的宽度(默认为buttons) 与其内容完全一样，因为它只占用显示其内容所需的空间，所以请尝试:
带有 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---*/
}
关于html - WinJS.BackButton 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31579074/