股利与段落编号段落对齐和DIV以外（见示意图）

我需要这样做的CSS股利与段落编号段落对齐和DIV以外（见示意图）

红色框是一个<div>有几个段落<p>

我想拥有的号段红色框的右侧，段落号码对齐到各自的顶部<p>

我可以只用CSS来做这个布局吗？

我已经尝试过使用javascript来做到这一点，记录每个段落元素的位置，然后将数字定位在相同的y坐标中。

感谢

alt text http://img804.imageshack.us/img804/7830/sketch20100722at095202p.png

来源

2010-07-23 Victor

是号码段从'0123独立元素'标签？ – mjschultz 2010-07-23 02:11:31

你可以做

<p style="position: relative;"> 
    <div style="width: 30px; position: absolute; top: 0; right: -30px">#1</div> 
    Lorum ipsum... 
</p>

你可能会想使用类也是如此，例如，仅内联样式。

另外，有效的参数是使用有序列表。这很容易通过将这些p元素包装在li元素中来完成，而元素又将被ol元素包裹。一定要使用ol { list-style: none; }，否则你会得到2组数字！

，作为添加号码，你可以使用服务器端脚本和DOM解析器或者使用JavaScript

var p = document.getElementById('content').getElementsByTagName('p'); 

for (var i = 0; i < p.length; i++) { 
    p[i].getElementsByTagName('div')[0].innerHtml = '#' + (i + 1); 
}

当然，你也可以使用jQuery

$('#content p').each(function(i) { 

    $(this).find('div:first').html('#' + (i + 1)); 

});

来源

2010-07-23 02:10:32 alex

这会将数字放在边界内。但它正在走上正轨。 – 2010-07-23 02:14:13

@Graphain CSS应该把它拉到外面。 – alex 2010-07-23 02:15:06

我误解了减号。是的，它会。 – 2010-07-23 02:17:18

这应该语义上是<ol>。

在任何情况下，这样的事情可能工作：

ol 
{ 
    border-top: 1px solid red; 
    border-bottom: 1px solid red; 
    border-left: 1px solid red; 
} 
p { border-right: 1px solid red; padding: 10px 0; } 
span.number { vertical-align: top; float: right; } 
.clear { clear: both; } 

<ol> 
    <li> 
    <p> 
     content 
    </p> 
    <div class="number"> 
     #1 
    </div> 
    <div class="clear"><div> 
    </li> 
</ol>

来源

2010-07-23 02:13:28

我想你会想添加'ol {list-style：none; }否则你会得到2组数字。 – alex 2010-07-23 02:19:32

关于语义的很好的一点。添加一个jQuery脚本来自动插入数字（主要是追加'

#Number

'代码，并且可能在插入数字时放下'P'并包装'LI'内容），这将是最好的答案。 – 2010-07-23 03:27:07

@Gert不确定CSS是否完美，其他人的答案更准确更快，所以我会离开它。不过谢谢。 – 2010-07-23 04:01:46

这里就是我想要做的：

<div> 
    <p> 
    content 1 
    <span>#1</span> 
    </p> 
    <p> 
    content 2 
    <span>#2</span> 
    </p> 
    <p> 
    content 3 
    <span>#3</span> 
    </p> 
</div>

和CSS的样子：

div { 
    padding:10px; 
    border:1px solid red; 
    width:500px; 
} 
p { 
    position:relative; 
} 
p span { 
    font-size:30px; 
    position:absolute; 
    top:0; 
    right:-60px; 
}

现在只玩弄定位。

来源

2010-07-23 02:19:54

这个答案建立在Graphain的答案上（他正确使用OL，因为它在语义上是正确的）。它使用jQuery来添加编号。

jQuery的

$(document).ready(function(){ 
    $("ol li").each(function(i){ 
    $(this).prepend('<span class="number">#'+(i+1)+'</span> '); // Append the number (using prepend, but the CSS will put the number after the box 
    }); 
});

CSS

ol { 
    list-style: none; 
    border: 1px solid red; 
    overflow: auto; 
    width: 500px; 
} 

li { 
    margin: 0.75em 0.75em 0.75em -28px; 
} 

.number { 
    position:absolute; 
    left: 560px; 
}

HTML

<ol> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li> 
</ol>

来源

2010-07-23 04:28:54

股利与段落编号段落对齐和DIV以外（见示意图）

回答

相关问题