[英]“Remove” icon and center align text in listview via css
Here's an example of a very simple jquery-mobile page with a list view widget. 这是一个非常简单的带有列表视图小部件的jquery-mobile页面的示例。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
.ui-listview .ui-btn-inner {
text-align: center;
}
</style>
</head>
<body>
<div data-role="page" id="main_page" >
<div data-role="header" data-position="inline">
<p><center>+</center></p>
</div>
<div data-role="content" >
<ul id="test" data-role="listview" data-icon="false">
<li><a href="#" data-transition="slide">Heading 1</a></li>
<li><a href="#" data-transition="slide">Heading 2</a></li>
<li><a href="#" data-transition="slide">Heading 3</a></li>
<li><a href="#" data-transition="slide">Heading 4</a></li>
</ul>
</div>
</div>
</body>
</html>
A listview normally displays each link as text left aligned along with an arrow icon which is right aligned. 列表视图通常将每个链接显示为左对齐的文本以及右对齐的箭头图标。 I've hidden the icon by choosing data-icon="false" and center aligned the text via css. 我通过选择data-icon =“ false”隐藏了该图标,并通过CSS将文本居中对齐。 However, the icon is still taking up some space in the button and the text is therefore not perfectly aligned within the button. 但是,图标仍在按钮中占据一些空间,因此文本在按钮内的对齐方式不完全。 How can I solve this? 我该如何解决? I tried setting the icon width to zero but that made no difference. 我尝试将图标宽度设置为零,但这没什么区别。
The issue is your list items have a css class called "ui-li-has-arrow" – this is adding padding-right: 40px to the links, pushing them to the left. 问题是您的列表项有一个名为“ ui-li-has-arrow”的css类-这将向右添加padding-right:40px,将其向左推。
You can override this in the head of test.html. 您可以在test.html的标题中覆盖它。
Where you currently have: 您目前所在的位置:
<style type="text/css">
.ui-listview .ui-btn-inner {
text-align: center;
}
</style>
Change it to: 更改为:
<style type="text/css">
.ui-listview .ui-btn-inner {
text-align: center;
}
.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow {
padding-right: 15px;
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.