Multiple padded elements with a list

Question

0.00/5 (No votes)

See more:

I am trying to write some html with results that should look like this

VB

Apples       X
Pears        Y
Strawberries Z

using the following code:

XML

<html>
<head>
<style type="text/css">
.test {dislay:inline;}
</style>
</head>
<body>


<ul>
<li><div class='test'><div style='width:500px;'>Apples</div>X</div></li>
<li><div style='width:500px;'>Pears</div>Y</li>
<li><div style='width:500px;'>Strawberries</div>Z</li>
</ul>
</body>
</html>

I can't seem to create the alignment of the last character.

Any help would be welcomed.

Posted 21-Apr-14 6:49am

csugden

Add a Solution

Comments

Richard C Bishop 21-Apr-14 12:56pm

You could use a table to format that. It would be easier than unordered lists and div combination.

csugden 21-Apr-14 13:40pm

Yes I could use another approach but to improve my knowledge of html I would like to know how to accomplish this within a list.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Guruprasad.K.Basavaraju · Accepted Answer · 2014-04-21T07:13:00

Solution 1

XML

<style type="text/css">
.test li span
{
    width: 500px;
}

.firstSpan
{
    float: left;
}

.test
{
    list-style-type: none;
}
</style>
<ul class="test">
<li>
    <span class="firstSpan">Apples</span>
    <span>X</span>
</li>
<li>
    <span class="firstSpan">Pears</span>
    <span>Y</span>
</li>
<li>
    <span class="firstSpan">Strawberries</span>
    <span>Z</span>
</li>
</ul>

Posted 21-Apr-14 7:13am

Guruprasad.K.Basavaraju

Updated 21-Apr-14 8:05am

v2

Comments

csugden 21-Apr-14 13:40pm

Yes I could use another approach but to improve my knowledge of html I would like to know how to accomplish this within a list.

Guruprasad.K.Basavaraju 21-Apr-14 14:05pm

Check the updated Solution

csugden 21-Apr-14 15:10pm

I am running IE 8. it seems like the second span tag on the X, Y and Z was not necessary.
I removed them and the solution appeared.

Thanks

Guruprasad.K.Basavaraju 21-Apr-14 15:19pm

Great, if have the third element then you need the second span else you are right its not necessary.

Also please close this question by accepting the answer.

csugden 21-Apr-14 16:08pm

Done