股利與段落編號段落對齊和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以外（見示意圖）

回答

相關問題