gpt4 book ai didi

css - 为什么用 Angular 添加类似乎会影响定位

转载 作者:行者123 更新时间:2023-11-28 08:18:49 26 4
gpt4 key购买 nike

我在向 ui-router 元素添加类时遇到了一个非常奇怪的错误。添加事件类时,跨越整个 View 的绝对定位元素会捕捉到其父元素的宽度。

我在发现的 plunker 中重新创建了错误 here

我的代码是这样的:

index.html

<body ng-controller="MainCtrl">
<header>
<span ng-click="toggleNav()">☰</span>
</header>
<nav ng-class="{active: navOpen}">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
<section class="container" ui-view ng-class="{active: navOpen}"></section>
</body>

样式.scss

nav {
position: absolute;
width: 100px;
height: 100%;
top: 25px;
left: 0;
background: gold;
transform: translateX(-100px);
transition: all .5s linear;
&.active {
transform: translateX(0);
}
}

.container {
width: 90%;
margin: 0 auto;
padding: 60px 0;
transition: all .5s linear;
&.active {
transform: translateX(100px);
}
div {
@extend header;
height: auto;
top: 25px;
background: deepskyblue;
padding: 10px;
section {
width: 90%;
margin: 0 auto;
span:last-child {
float: right;
}
}
}
}

app.coffee

app = angular.module 'plunker', ['ui.router']

app.config ($stateProvider) ->
$stateProvider
.state 'foo',
url: ''
templateUrl: 'foo.html'

app.controller 'MainCtrl', ($scope) ->
$scope.navOpen = false

$scope.toggleNav = ->
$scope.navOpen = !$scope.navOpen

如有任何帮助,我们将不胜感激!

已解决:将宽度和自动边距更改为 5% 左右填充

最佳答案

在正文中添加overflow: hidden:

body{
overflow: hidden;
}

去掉容器上的width: 90%:

.container {
margin: 0 auto;
padding: 60px 0;
transition: all .5s linear;
}

关于css - 为什么用 Angular 添加类似乎会影响定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28862768/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com