我有这个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
答案 0 :(得分:1)
可能您必须将display: inline-block
设置为button
,因为带有display: inline
(buttons
的默认值)的元素的宽度与其内容完全相同,因为它只占用显示其内容所需的空间,所以请尝试:
使用ID选择器
#backButton {
height: 30px;
width: 30px;
display: inline-block;
}
&#13;
<button id="backButton" data-win-control="WinJS.UI.BackButton"></button>
&#13;
内联样式
<button data-win-control="WinJS.UI.BackButton" style="width: 30px; height: 30px; display: inline-block"></button>
&#13;
尝试将样式设置为子元素.win-back
#backButton .win-back{
/*---styles---*/
}
答案 1 :(得分:0)
您没有为您的按钮指定ID。 CSS不知道链接到哪个标签。
<button id="backButton" data-win-control="WinJS.UI.BackButton"></button>
编辑:您可能会发现以下参考资料有用CSS Selectors