css对齐对象

Question

我的问题是如何在没有圆点的情况下将对象看起来像这样：

  

1234   .................................................. .................................................. .................................................. ............................ 1234 ..................... .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. ................... 1234

我知道这可以用不同的类完成，然后是不同的margin-top。但我有很多东西。有没有办法在没有javascript的情况下直接在css中执行？

谢谢:)

Answer 1

将float:left;或margin-left : 0px;属性赋予所有对象。

Answer 2

您只需使用margin-left属性

使用margin属性，您可以根据需要对齐元素并从左侧，右侧，顶部或底部推送它们。

例如：

<span style="margin-left:0px;">1234</span><br/>
<span style="margin-left:30px;">1234</span><br/>
<span style="margin-left:60px;">1234</span>

Example

如果您希望实现您的示例而没有<br/>，那么我建议如下。

<span style="display:block; margin-left:0px; margin-bottom:15px;">1234</span>
<span style="display:block; margin-left:30px; margin-bottom:15px;">1234</span>
<span style="display:block; margin-left:60px; margin-bottom:15px;">1234</span>

Example

使用display:block;，您可以使用margin-bottom制作div样式的属性，并允许您使用margin-bottom。 使用{{1}}，您可以将下一个元素向下推，这会导致额外的一行。

Answer 3

我认为当文本只有一行时，使用带边距的跨度（当转换为块元素时）很棒。当你看下面这个例子（http://codepen.io/anon/pen/LKysb）时，你会发现当使用边距时，这个跨度就像文本缩进一样，它是默认显示：内联。为什么使用内联元素元素并将其更改为块元素，而您可以立即使用块元素。

我的建议：使用div，并添加一个margin-left。

注意：

如果要在段落<p>中实现此目的，则不能使用div。因为<p>只允许使用内联元素。在div中使用<span>并在块元素中转换它是一种欺骗某些验证器的方法，但我不知道不同的浏览器对此有何反应。

回到你的问题：

HTML：

<div class="step1">
  1234
</div>
<div class="step2">
  1234
</div>
<div class="step3">
  1234
</div>
<div class="step4">
  1234
</div>

的CSS：

.step1 { margin-left: 0px; }
.step2 { margin-left: 20px; }
.step3 { margin-left: 40px; }
.step4 { margin-left: 60px; }

/ *更新* /

没有类和没有javascript的快速方法是：

HTML：

<div>1<div>2<div>3<div>4</div></div></div></div>

的CSS：

div { margin-left: 20px; }

但是如果你不想要很多类或模糊的html（比如上面这个例子），你可以使用jQuery来帮助你：

HTML：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

jQuery的：

$(function() {
  var currentOffset = 0;
  var offsetPerDiv = 10;
  $('div').each(function() {
    $(this).css('margin-left',currentOffset+'px');
    currentOffset = currentOffset+offsetPerDiv;
  }); 
}); 

查看直播：http://codepen.io/anon/pen/Lgzvx