CSS : align at a certain position

问题

I know what I want but I'm not sure how to best express it, so please be forgiving.

I have numbered headlines in my page, and paragraphs following the headlines. I wish to align the text of the paragraphs the same as the start of the title of the headline, and the numbers of the headlines being aligned to the right, at for example 0.5em of the title of the headline.

Here is an example in monospace font:

    1. Introduction
       This is the beginning of the introduction.

  1.1. Sub header
       Another paragraph here and when it comes to having 
       another line, it is indented as the first one.

1.1.1. Sub-sub header
       Notice how the headlines and paragraphs are exactly
       aligned, whereas the numbers in the headlines are shifted
       to the right ?

  1.2. Sub header 2
       I'm sure you get the picture...

What is the best way to achieve this in HTML/CSS ? It would be trivial to use tables but I wish to do otherwise if there is a cleaner way.

回答1:

This is how I would do it:

HTML:

<ul id="list">
    <li>
        <h2>Intro<em></em></h2>
        <p>This is the beginning of the introduction.</p>
    </li>
    <li>
        <h3>Sub header<em></em></h3>
        <p>Another paragraph here and when it comes to having 
            another line, it is indented as the first one.</p>
    </li>
    <li>
        <h4>Sub-sub header<em></em></h4>
        <p>Notice how the headlines and paragraphs are exactly
            aligned, whereas the numbers in the headlines are shifted
            to the right ?</p>
    </li>
    <li>
        <h3>Sub header 2<em></em></h3>
        <p>I'm sure you get the picture...</p>
    </li>
</ul>

CSS:

#list {
    counter-reset: level1 0 level2 0 level3 0;
    margin-left:50px;
}

#list h2,
#list h3,
#list h4 { margin-left:-50px; }

#list em { float:left; width:40px; padding-right:10px; text-align:right; }

#list h2 em:before {
    counter-increment: level1 1;
    content: counter(level1, decimal) ".";
}

#list h3 em:before {
    counter-increment: level2 1;
    content: counter(level1, decimal) "." counter(level2, decimal) ".";    
}

#list h4 em:before {
    counter-increment: level3 1;
    content: counter(level1, decimal) "." counter(level2, decimal) "." counter(level3, decimal) ".";    
}

Live demo: http://jsfiddle.net/9bkwQ/

Notice that:

There are no CSS classes set on the HTML elements - there is no need for that (Result: cleaner code)
The numbering is auto-generated via CSS counters which means that you don't have to update the numbering whenever you want to insert an item between other items.

回答2:

I imagine you're using custom numbers? You're placing them there yourself without the use of ? I'd imagine so with that system.

Either way, I'd probably set up some divs to look like this:

Quick Note: You'd need to add clear:both to the main container to have them stack nicely.

<div style="display:inline-block; width:100%; clear:both")
    <div style="float:left; margin-right:5px">
        1.
    </div>
    <div style="float:left">
        The first headline
    </div>
</div>

Something like this would work fine and you could use your own styles to manipulate the structure/design, but again, I don't know if it's the absolute best way.

回答3:

Check out a JSFiddle of it here: http://jsfiddle.net/uvQsR/2/

<div class="section">
    <span class="number">1.1.</span>
    <h4 class="heading">Sub header</h4>
    <p> Another paragraph here and when it comes to having 
   another line, it is indented as the first one. </p>
</div>

with css

.section {
    padding-left:40px;
}
.number{
    text-align:right;
    margin-left:-40px;
    float:left;
    width:40px;
}

回答4:

You could do something like this, adjusting the width and margin as necessary (and depending on the depth/length of the header numbers)

<h2 class="number">1.</h2><h2 class="text">Introduction</h2>
<p>This is the beginning of the introduction.</p>

<h2 class="number">1.1</h2><h2 class="text">Sub header</h2>
<p>Another paragraph here and when it comes to having<br /> 
       another line, it is indented as the first one.</p>

CSS

h2.number{display:inline-block; width:30px;}
h2.text{display:inline-block;}
p{margin-left:30px; margin-bottom:10px;}

http://jsfiddle.net/jasongennaro/VKP9Y/

来源：https://stackoverflow.com/questions/6860309/css-align-at-a-certain-position

标签

css

text-alignment