Html 简化嵌套 div 的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16033137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
simplify css for nested divs
提问by bebbi
I have a DOM like this:
我有一个这样的 DOM：
<div class='container'>
<div class='visual'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='container'>
<div class='visual'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<!-- more container nesting possible -->
</div>
</div>
The CSS is
CSS是
.container .visual {
margin-left:20px;
}
.container .container .visual {
margin-left:40px;
}
.container .container .container .visual {
margin-left:60px;
}
which has to be done for every depth level and is of course silly.
这必须为每个深度级别完成，当然很愚蠢。
Here's a jsfiddle(Updated: more structure, more lines of text)
这是一个jsfiddle（更新：更多的结构，更多的文本行）
Is there a simpler solution that maintains the tree-like HTML and has the same effect?
是否有更简单的解决方案，可以维护树状 HTML 并具有相同的效果？
采纳答案by Sébastien Garmier
This code works fine:
这段代码工作正常：
<html>
<head>
<style type="text/css">
.container {
margin-left: 20px;
}
.nomove {
position:absolute;
left: 0px;
width: 100px;
}
.dummie {
color:transparent;
width: 100px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="visual">indent indicator</div>
<div class="nomove">text in this class is always left-aligned</div>
<div class="dummie">text in this class is always left-aligned</div>
<div class='container'>
<div class='visual'>indent indicator</div>
<div class='nomove'>text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
<div class="dummie">text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
</div>
</div>
</body>
</html>
The .nomove div is moved with position:absolute and left:0px to the left side. The dummie div makes a gap between two divs, because position:absolute has no height.
.nomove div 以 position:absolute 和 left:0px 移动到左侧。虚拟 div 在两个 div 之间产生间隙，因为 position:absolute 没有高度。
PS: Sorry for my english ;)
PS：对不起我的英语;)
EDIT:
编辑：
Now the dummie and the nomove div have the same text, the same width, but the dummie is transparent.
现在傻瓜和 nomove div 具有相同的文本，相同的宽度，但傻瓜是透明的。
回答by xpy
回答by Kevin Bowersox
You could remove some of the containerclasses and simply rely on three visualclasses.
您可以删除一些container类并简单地依赖三个visual类。
HTML
HTML
<div>
<div class='visual1'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div>
<div class='visual2'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div>
<div class='visual3'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<!-- more nested containers possible -->
</div>
</div>
</div>
CSS
CSS
.visual1 {
margin-left:20px;
}
.visual2 {
margin-left:40px;
}
.visual3 {
margin-left:60px;
}
回答by Andrew
You can do it like this: http://jsfiddle.net/TMAXa/3/
你可以这样做：http: //jsfiddle.net/TMAXa/3/
Which is taking on from what @KevinBowersox said. but you dont need to use as much HTML code if you have an increment on the CSS.
这是从@KevinBowersox 所说的。但是如果您在 CSS 上有增量，则不需要使用尽可能多的 HTML 代码。
<div class='visual1'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='visual2'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='visual3'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
