Solved

Problem with alignment in HTML

Posted on 2007-11-13
8
209 Views
Last Modified: 2012-06-27
I want to align the letter like the below example in html. How do I do it?? I not getting it right.

     (a)  dasdas
   (ab)  sadsad
  (abc) sadsad           < ------------   //This is what I want, align the bullet to the right.
(abcd) sad
//////////////////////////////////////////////////////////////////////////////////////////////
(a)       dasdas
(ab)     sadsad
(abc)   sadsad           < ------------   //This is what I do not want, I do not want like this ! ! !
(abcd) sad

   
0
Comment
Question by:xiaoxin85
8 Comments
 
LVL 3

Expert Comment

by:samalraj
ID: 20278112
Hi,
     you could use like
<table border=0>
<tr>
 <td align="right">(a)</td><td>  dasdas</td>
</tr>
<tr>
 <td align="right">(ab)</td><td>  dasdas</td>
</tr>

<tr>
 <td  align="right">(abc)</td><td>  dasdas</td>
</tr>

<tr>
 <td  align="right">(abcd)</td><td>  dasdas</td>
</tr>
</table>

0
 

Author Comment

by:xiaoxin85
ID: 20278115
is there any way except for table??? I do not want to use a table, is there other right??? like in css???
0
 
LVL 3

Expert Comment

by:samalraj
ID: 20278163
Hi,
     you could do it like this
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

type can be
type="I"
type="i"
type="1"
type="a"
type="A"
 



0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 16

Accepted Solution

by:
kiranvj earned 250 total points
ID: 20278195
or like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.align_right {
      text-align:right;
      width:100px;
      float:left;
}
.align_left {
      text-align:left;
      width:100px;
      float:left;
}
</style>
</head>

<body>
<div class="align_right">(a)</div><div class="align_left"> dasdas</div><br />
<div class="align_right">(ab)</div><div class="align_left"> ddfasdas</div><br />
<div class="align_right">(abc)</div><div class="align_left"> sddas</div><br />
<div class="align_right">(abcd)</div><div class="align_left"> ada</div><br />
</body>
</html>
0
 
LVL 18

Assisted Solution

by:Eternal_Student
Eternal_Student earned 250 total points
ID: 20279028
This is even better ;-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
dt{float:left;}
dt span{width:40px; display:block; text-align:right}
dd{padding-left:4px;}
</style>
</head>

<body>
      <dl>
            <dt><span>(a)</span></dt>
            <dd>Black hot drink</dd>
            <dt><span>(ab)</span></dt>
            <dd>White cold drink</dd>
            <dt><span>(abc)</span></dt>
            <dd>White cold drink</dd>            
      </dl>
</body>
</html>
0
 

Author Comment

by:xiaoxin85
ID: 20287246
it is gd but mi need something like if it have more than 1 line, like the 1 below.

     (a)  dasdasdsadsdasdasdasdasd
            dsadasdsadasd
   (ab)  sadsad
  (abc) sadsad          
(abcd) sad
0
 
LVL 1

Expert Comment

by:Computer101
ID: 20558535
Forced accept.

Computer101
EE Admin
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now