关于我的询问的一些背景。目前，我有一个选项卡式内容，可以使用列表根据用户选择切换内容。我希望在列表中显示一个小图标，一个带圆圈的数字。最重要的是，每个列表都有自己的背景图片。但我意识到，当我将屏幕尺寸更改为喜欢 ipad 时，图标将不会像我之前在 iPhone 4 屏幕尺寸上看到的那样对齐。
希望看看是否有人可以对此提出建议。
下面是我的代码。
风格
<style>
@media (max-width: 1024px)
{
html
{
font-size: 14px;
}
}
@media (max-width: 320px)
{
html
{
font-size: 8px;
}
}
#tab1, #tab2
{
display: none;
}
.main
{
margin: 0 auto;
min-width: 100%;
max-width: 100%;
background: color(alabaster);
position: relative;
top: 25%;
z-index: 10;
}
.pill-btn-no-item1
{
position: absolute;
left: 15.8rem;
z-index: 11;
background-color: green;
width: 2.8rem;
height: 2.8rem;
padding: 0.3rem;
font-weight: bold;
font-size: 1.5rem;
color: #fff;
text-align: center;
border-radius: 50%;
}
.pill-btn-no-item2
{
position: absolute;
right: 3.8rem;
z-index: 11;
background-color: green;
width: 2.8rem;
height: 2.8rem;
padding: 0.3rem;
font-weight: bold;
font-size: 1.5rem;
color: #fff;
text-align: center;
border-radius: 50%;
}
.contentpanel
{
background: color(alabaster);
color: color(dove-gray);
padding: 5rem 0 0;
}
.contentpanel > div
{
display: none;
padding: 0rem 0rem 0.5rem;
}
.radio
{
display: none;
}
.overall-nav
{
padding: 0 2rem;
height: 5.8rem;
position: absolute;
width: 100%;
margin-top:-2.5rem;
}
nav
{
background: color(white);
border-radius: 5rem;
height: 5.8rem;
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-shadow: rgba(153,153,153,0.5) 0 0.5rem 0.8rem 0.1rem;
-moz-box-shadow: rgba(153,153,153,0.5) 0 0.5 0.8 0.1;
box-shadow: 0 0.5rem 0.8rem 0.1rem rgba(153,153,153,0.5);
}
nav ul
{
float:left;
width:100%;
height: 5.8rem;
padding: 0;
margin: 0;
}
.clear
{
clear:both;
}
nav li
{
float: left;
width: 50%;
border-radius: 5rem;
list-style: none;
height: 5.8rem;
}
nav ul li label
{
padding: 2rem 1rem;
text-align: center;
display: block;
font-weight: bold;
}
.wording
{
margin-top:4.5rem;
font-size: 1rem;
}
nav li:hover
{
color: #B9B5C7;
cursor: pointer;
}
#tab1:not(:checked) ~ .overall-nav nav .tab1
{
background: white url('scheduledfund-unfocus.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 5rem 3.2rem;
color: color(dusty-gray);
}
#tab1:checked ~ .overall-nav nav .tab1
{
background: red url('scheduledfund.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 5rem 3.2rem;
color: color(congress-blue);
}
#tab2:not(:checked) ~ .overall-nav nav .tab2
{
background: white url('adhocfund-unfocus.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 5rem 3.2rem;
color: color(dusty-gray);
}
#tab2:checked ~ .overall-nav nav .tab2
{
background: red url('adhocfund.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 5rem 3.2rem;
color: color(congress-blue);
}
#tab1:checked ~ .contentpanel .tab1,
#tab2:checked ~ .contentpanel .tab2
{
display: block;
}
</style>
** 主要代码**
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="main">
<input id="tab1" class="radio" type="radio" name="tabs" checked="checked">
<input id="tab2" class="radio" type="radio" name="tabs">
<div class="overall-nav">
<nav>
<ul>
<li for="tab1" class="tab1">
<label for="tab1"><span class="pill-btn-no-item1">2</span></label>
</li>
<li class="tab2">
<label for="tab2"><span class="pill-btn-no-item2">3</span></label>
</li>
</ul>
<div class="clear"></div>
</nav>
</div>
<div class="contentpanel">
<div class="tab1">
Content 1
</div>
<div class="tab2">
Content 2
</div>
</div>
</div>
</html>
最佳答案
你需要给标签添加位置
nav ul li label {position: relative;}
.pill-btn-no-item1, .pill-btn-no-item2 {left: auto; right: 20px;}
关于html - 无论屏幕大小如何，图标都保持在同一位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47789167/