问UI响应列表偏离位置
EN

Stack Overflow用户

提问于 2021-12-14 07:28:41

回答 1查看 24关注 0票数 0

我真的在和我的UI做斗争，如果屏幕大小不同的话，这个界面应该是合适的。不幸的是，它并没有，很明显，我正在处理错误的CSS属性。到目前为止，我认为用vh替换固定的px值可以做到这一点。不幸的是我错了。背景条形图确实会调整大小，也会调整li元素的大小，但是在调整大小后，ul的边距是错误的。

它通常看起来如何：

我的问题是，ul错了位置：

body {
    position: absolute;
    height: 100%;
    background: #e6e7ee;
    overflow: hidden;
    margin: 0px;
}

.neumorphic {
    box-shadow: 12px 12px 24px 0 rgba(0, 0, 0, 0.2),
        -12px -12px 24px 0 rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    overflow: hidden;
    padding: 1.3rem;
    display: flex;
}

input.toggle-button[type="checkbox"] {
  cursor: pointer;
  border: none;
  height: 5vh;
  width: 5vh;
  transition-property: background-color, box-shadow;
  transition-duration: 0.1s;
  border-radius: 50%;
  font-family: FontAwesome;
  font-size:2.5vh;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

input.toggle-button[type="checkbox"]:checked {
  box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), 
              inset -3px -3px 5px white;
}
  
input.toggle-button[type="checkbox"]:checked::after {
  color:#3498db;
}

input.toggle-button[type="checkbox"]:hover{
  color:#3498db;      
}

.lightmode {
    background: #ecf0f3;
    color: #7a7a7a;
    box-shadow:
    6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}

#nav-background {
    position: absolute;
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
    width: 7vh;
    margin-top: 2.5vh;
    height: 95vh;
    box-shadow:
        -10px -10px 15px rgba(255,255,255,0.5),
    10px 10px 15px rgba(70,70,70,0.12);   
}

ul {
    position: relative;
    list-style-type: none;
    justify-content: center;
    display:list-item;
}

ul li {
    margin-left: -4vh;
    margin-bottom: 5vh;
}

ul li:last-child {
    margin-top:32vh;
}

.icon-closed:after{
    content: "\f52a";
}

#search-toggle:after{
    content: "\f002";
}

#view-toggle:after{
    content: "\f06e";
}

#simulation-toggle:after{
    content: "\f017";
}

#export-toggle:after{
    content: "\f56e";
}

#admin-toggle:after{
    content: "\f502";
}
  
#info-toggle:after{
    content: "\f129";
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>ScalingUI</title>

    <!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<body>
    <!--------------- NAV ----------------->
    <div class="lightmode" id="nav-background">
        <ul id="ul-nav">
            <li>
                <input class="toggle-button icon-closed lightmode input-toggle-button" type="checkbox" id="user-toggle">
            </li>
            <li>
                <input class="toggle-button lightmode input-toggle-button" type="checkbox" id="search-toggle">
            </li>
            <li>
                <input class="toggle-button lightmode input-toggle-button" type="checkbox" id="view-toggle">
            </li>    
            <li>     
                <input class="toggle-button lightmode input-toggle-button" type="checkbox" id="simulation-toggle">
            </li>
            <li>
                <input class="toggle-button lightmode input-toggle-button" type="checkbox" id="export-toggle">
            </li>
            <li>
                <input class="toggle-button lightmode input-toggle-button" type="checkbox" id="admin-toggle">
            </li>
            <li>
                <input class="toggle-button lightmode input-toggle-button" type="checkbox" id="info-toggle">
            </li>
        </ul>
    </div>
</body>

</html>

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-14 07:32:51

不知何故，在您的padding元素上有额外的ul。尝试以下几点：

ul {
   padding-left: 5px;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70345169

复制

相似问题

问UI响应列表偏离位置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问UI响应列表偏离位置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问UI响应列表偏离位置
EN