html - 无论屏幕大小如何，图标都保持在同一位置

Question

关于我的询问的一些背景。目前，我有一个选项卡式内容，可以使用列表根据用户选择切换内容。我希望在列表中显示一个小图标，一个带圆圈的数字。最重要的是，每个列表都有自己的背景图片。但我意识到，当我将屏幕尺寸更改为喜欢 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>

Answer 1

你需要给标签添加位置

nav ul li label {position: relative;}
.pill-btn-no-item1, .pill-btn-no-item2 {left: auto; right: 20px;}