登录 | 注册 | FAQ
Anonymous

aligning text within <div>

+ 发表回复

4 篇帖子 分页: 1 / 1


aligning text within <div>

wilsonsj1025 » 周日 2月 13, 2011 1:01 am

I would like help in getting my line items stretched across the <div> box. I want 3 bullets on the left, 3 bullets in the middle, and 3 bullets on the right. This is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD

HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<style type="text/css">
#bulletdiv {
height:5%;
width:100%;
background:red;
text-align:justify;
border: 1px solid blue;
}
</style>

</head>

<body>

<div id="bulletdiv">
<ul>
<li>Residential and Commercial Painting</li>
<li>Interior and Exterior Painting</li>
<li>Walls and Trim Repair</li>
<li>Cabinet Restoration</li>
<li>Deck Restoration and Repair</li>
<li>Dock Restoration and Repair</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>
</div>

</body>

</html>

Any help would be appreciated!

Thank you!
头像

wilsonsj1025

  • 帖子: 2
  • 注册: 周日 2月 13, 2011 12:53 am

Re: aligning text within <div>

HTML.net » 周日 2月 13, 2011 11:38 am

You can use the column example from lesson 13 in the CSS tutorial:

CSS:

#column1 {
float:left;
width: 33%;
}

#column2 {
float:left;
width: 33%;
}

#column3 {
float:left;
width: 33%;
}


HTML:

<div id="column1">
<ul>
<li>Residential and Commercial Painting</li>
<li>Interior and Exterior Painting</li>
<li>Walls and Trim Repair</li>
</ul>
</div>

<div id="column2">
<ul>
<li>Cabinet Restoration</li>
<li>Deck Restoration and Repair</li>
<li>Dock Restoration and Repair</li>
</ul>
</div>

<div id="column3">
<ul>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>
</div>


- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: aligning text within <div>

wilsonsj1025 » 周日 2月 13, 2011 3:06 pm

Awesome! Thank you! :)
头像

wilsonsj1025

  • 帖子: 2
  • 注册: 周日 2月 13, 2011 12:53 am

Re: aligning text within <div>

Robster79 » 周日 2月 27, 2011 11:42 pm

Very helpful question with a very helpful answer. This clarified some things for me. Thanks.
头像

Robster79

  • 帖子: 1
  • 注册: 周日 2月 27, 2011 11:33 pm


+ 发表回复

分页: 1 / 1