簡化嵌套div的css
[英]simplify css for nested divs
問題描述
我有這樣的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>
CSS是
.container .visual {
margin-left:20px;
}
.container .container .visual {
margin-left:40px;
}
.container .container .container .visual {
margin-left:60px;
}
這必須在每個深度級別完成，當然是愚蠢的。
這是一個jsfiddle （更新：更多結構，更多行文本）
是否有一個更簡單的解決方案來維護類似樹的HTML並具有相同的效果？
4 個解決方案
解決方案1
2 2013-04-16 09:49:10
我知道這不是一個非常優雅的解決方案：
.container{
padding:20px 0 0 20px;
}
.nomove {
position:absolute;
left:10px;
}
解決方案2
0 2013-04-16 09:19:30
您可以刪除一些container類，只需依賴三個visual類。
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
.visual1 {
margin-left:20px;
}
.visual2 {
margin-left:40px;
}
.visual3 {
margin-left:60px;
}
解決方案3
0 2013-04-16 09:28:34
你可以這樣做： http ： //jsfiddle.net/TMAXa/3/
這是@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>
解決方案4
0 已采納 2013-04-16 09:37:27
這段代碼工作正常：
<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>
.nomove div移動位置：absolute和left：0px到左側。 dummie div在兩個div之間產生差距，因為position：absolute沒有高度。
PS：抱歉我的英文;）
編輯：
現在dummie和nomove div有相同的文字，相同的寬度，但dummie是透明的。
嵌套div的CSS樣式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.