HTML
<ul>
<li>Chapter One - This is chapter one text text text text text text text text</li>
</ul>
How can I accomplish this?
-
Can you edit the HTML at all?Graham– Graham2013-06-06 21:07:59 +00:00Commented Jun 6, 2013 at 21:07
-
@Graham Yeah, you can edit anything. I'm just trying to get it look nicely lined up.user2133606– user21336062013-06-06 21:29:12 +00:00Commented Jun 6, 2013 at 21:29
-
What do you want to do here? Why use list at all? This looks like a paragraph or multiple paragraphs following a heading. Am I correct?Armen Michaeli– Armen Michaeli2013-06-06 21:30:46 +00:00Commented Jun 6, 2013 at 21:30
-
@amn Well I'm listing a table of chapters with some information on it. I'm still in the process of learning so I don't know which is currently the best way. I was going to use a table instead.user2133606– user21336062013-06-06 21:35:02 +00:00Commented Jun 6, 2013 at 21:35
-
You mean you want to structure a TOC (Table Of Contents), like in a beginning or end of a book?Armen Michaeli– Armen Michaeli2013-06-06 21:43:25 +00:00Commented Jun 6, 2013 at 21:43
Add a comment
|
3 Answers
An inline-block element with a set maximum width and corrected vertical alignment is all you need.
Markup snippet:
<ul>
<li>Chapter One - <span class="desc">This is chapter one text text text text text text text text</span></li>
</ul>
Stylesheet snippet:
span.desc {
display: inline-block;
max-width: 10em;
vertical-align: top;
}
The 10em maximum width is my chosen example value, adjust it according to preference.
Comments
Use a definition list (<dl>) instead of an unordered list:
<dl>
<dt>Chapter One</dt>
<dd>This is chapter one text text text text text text text text</dd>
</dl>
Now you can float both <dt> and <dd> left to bring them next to eachother and you can give <dd> a specific width.
3 Comments
Wouter J
@veelen, yes: "Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data." (w3.org/TR/html5/grouping-content.html#the-dt-element )
veelen
But wouldn't a header be more appropriate here? In this case, the value says nothing about the name, and the name nothing about the value.
Wouter J
We don't know what the value contains, but I assumed it as some small summary of the chapter. The, it definetly saus something about the name
try
ul li {
text-indent:-50px;
padding-left:50px;
}
text-indent with negative value will move first-line left and whole padding-left will shift everything else back
here is a http://jsfiddle.net/edv7d/
3 Comments
RichieHindle
But you need to guess at the width of "Chapter One -"
lpd
Assuming
list-style-position is outside, not inside.
dsuess
both of you are right, it would be nicer if instead of an unordered list it may be changed to more semantically correct tags like dt,dd