gpt4 book ai didi

javascript - 为什么嵌入后没有应用 css 样式?

转载 作者:行者123 更新时间:2023-11-27 23:37:33 27 4
gpt4 key购买 nike

为什么样式没有应用到在下面的代码中,我使用了 ng-transcludeTransclusion工作正常,唯一的问题是类 .box 没有应用于 span。为什么会这样?

transclude.html 是:

<html ng-app="myApp">
<head>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/transclude.js" type="text/javascript"></script>

<style type="text/css">
.box{
background-color: red;
}
</style>

</head>
<body>

<div sidebox title="Links">
<ul>
<li>first link</li>
<li>2nd link</li>
</ul>
</div>
</body>
</html>

transclude.js 是:

var app = angular.module('myApp',[]);
app.directive('sidebox',function(){
return {
restrict:'A',
transclude:true,
scope:{
title:'@'
},
template:'<div>\n\
<h1>{{title}}</h1>\n\
<span class="box" ng-transclude></span></div>\n\
'
};
});

更新:从源代码可以清楚地看出 .box 已应用,但它没有将 div 变为红色。 enter image description here

最佳答案

A <span>元素默认为 display: inline .这意味着它只接受纯文本或标记文本,不接受其他元素,尤其不接受 display: block<ul> 等元素.

如果你真的想使用span(你应该使用div),你需要将它的css设置为display: block使其根据 block 内容调整自身大小。或者 display: inline-block如果您想要一些其他(内联)属性,同时保留 block 行为。但是inline-block有一些您很可能不想要的副作用。

这也不是 Angular 问题,因为它只是一个普通的 html/css 问题。

关于javascript - 为什么嵌入后没有应用 css 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33151893/

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