1

我有一个这样的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

4 回答 4

2

我知道这不是一个非常优雅的解决方案：

.container{
    padding:20px 0 0 20px;
}

.nomove {
    position:absolute;
    left:10px;
}

演示

于 2013-04-16T09:49:10.793 回答
0

您可以删除一些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;
}
于 2013-04-16T09:19:30.923 回答
0

你可以这样做：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>
于 2013-04-16T09:28:34.407 回答
0

此代码工作正常：

<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 与 position:absolute 和 left:0px 一起移动到左侧。虚拟 div 在两个 div 之间产生间隙，因为 position:absolute 没有高度。

PS：对不起我的英语；）

编辑：

现在 dummie 和 nomove div 具有相同的文本、相同的宽度，但 dummie 是透明的。

于 2013-04-16T09:37:27.713 回答