极客观点
项目管理
HarmonyOS
用 for循环创建几个li后单单就 ul.outer的 letter-spacing的属性不起作用. 为什么??
我知道在li中用 margin可以代替 ul.outer的 letter-spacing, 但是如果就用 letter-spacing该怎么办??
能帮我分析下原理吗??先谢谢了...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style media="screen">
body,ul,li{
padding: 0;
margin: 0;
list-style: none;
font-size: 0;
letter-spacing: -4px;
}
ul.outer{
width: 700px;
height: 100px;
border: 1px solid #000;
margin: 0 auto;
/* 不起作用的 letter-spacing */
letter-spacing: 4px;
text-align: center;
}
ul.outer li{
display: inline-block;
vertical-align: top;
font-size: 40px;
width: 100px;
height: 100px;
line-height: 100px;
border: 1px solid #000;
box-sizing: border-box;
letter-spacing: 0;
}
</style>
<title>Document</title>
</head>
<body>
<ul class="outer">
<!-- <li></li> -->
</ul>
<script type="text/javascript">
let createEleFcn= function (parent,child,amount,classAttr,innerText0,innerText1) {
for(let i=0; i<amount; i++){
let beCreatedEle= document.createElement(child);
if(classAttr){
beCreatedEle.classList.add(classAttr);
}
if(innerText0){
beCreatedEle.innerText= innerText0;
}
if(innerText1){
beCreatedEle.innerText= i+1;
}
parent.appendChild(beCreatedEle);
}
}
let ulOuter= document.querySelector("ul.outer");
createEleFcn(ulOuter,"li",6,"hello",false,true);
</script>
</body>
</html>