Text position inside div tag in Dreamweaver CS6

Question

I am having trouble arranging the text inside a div tag in dreamweaver. I have tag for the main body of my page and I want to place the text freely; wherever I want, but dreamweaver is not allowing me to do so. When I click tab inside the div it does not work. No matter what I do I give a single space between my words. For example I want to arrange my text in the following way:

Please click on items for detail:

Item_one Item_two Item_three Item_four Item_five

Item_six Item_seven Item_eight Item_nine Itme_ten

Thanks

score 1 · Accepted Answer · answered Nov 05 '14 at 04:51

What you are looking for, might look similar to this:

<div>
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <br />
   <li>Item 6</li>
   <li>Item 7</li>
   <li>Item 8</li>
   <li>Item 9</li>
   <li>Item 10</li>
  </ul>  
</div>

This is the CSS:

ul li {
  list-style: none;
  display: inline-block;
}

It is not recommended to use a div for every element that you are creating. It is easier to use unordered lists and style them according to what your project requires.

Hope it helps!

score 0 · Answer 2 · answered Nov 05 '14 at 02:28

The easiest way to achieve this would be to use display: inline-block for every item. Like this:

 <div style="width: 100%">
 <div style="display: inline-block">Item_one</div>
 <div style="display: inline-block">Item_two</div>
 </div> 
 <div style="width: 100%">
 <div style="display: inline-block">Item_four</div>
 <div style="display: inline-block">Item_six</div>
 </div>

etc. Please do note that it'll only work if there's enough space for the div to display itself in a line; otherwise, you won't see any effect.

Hope this helps.

Text position inside div tag in Dreamweaver CS6

2 Answers2