CODEWITHSUNDEEP
htmlcss
user2605240
user2605240

Reputation: 11

My elements are not going on the same line - using "display:inline"

Please take a look at the code and tell me what I'm doing wrong? I want "Hi" to go to the right of the table. I've tried putting "float:left" on all elements and on each individually.

<div style="display:inline">

<h1>Heading</h1>

<ul>
<li><h4>Reason 1</h4></li>
<li><h4>Reason 2</h4></li>
<li><h4>Reason 3</h4></li>
<li><h4>Reason 4</h4></li>
<li><h4>Reason 5</h4></li>
</ul>

<h1>Hi</h1>
</div>

Upvotes: 1

Views: 322

Answers (3)

sabithpocker
sabithpocker

Reputation: 15566

display property will not be inherited by all child elements. you have to specify it for li specifically, or else default display of list-item will be used for li

<div>

<h1>Heading</h1>

<ul>
<li style="display:inline"><h4>Reason 1</h4></li>
<li style="display:inline"><h4>Reason 2</h4></li>
<li style="display:inline"><h4>Reason 3</h4></li>
<li style="display:inline"><h4>Reason 4</h4></li>
<li style="display:inline"><h4>Reason 5</h4></li>
</ul>

<h1>Hi</h1>
</div>

and to remove the mess we do CSS

<style>
#inline-list li{
    display: inline-block;//or inline as you like
}
</style>
<div>

<h1>Heading</h1>

<ul id="inline-list">
<li><h4>Reason 1</h4></li>
<li><h4>Reason 2</h4></li>
<li><h4>Reason 3</h4></li>
<li><h4>Reason 4</h4></li>
<li><h4>Reason 5</h4></li>
</ul>

<h1>Hi</h1>
</div>

Or do you want something like this? Heading, list and other heading in same line?

<div>

<h1 style="float:left">Heading</h1>

<ul style="float:left">
<li><h4>Reason 1</h4></li>
<li><h4>Reason 2</h4></li>
<li><h4>Reason 3</h4></li>
<li><h4>Reason 4</h4></li>
<li><h4>Reason 5</h4></li>
</ul>

<h1 style="float:left">Hi</h1>
</div>

http://jsfiddle.net/nXC8Z/

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36438

If you want the h1, ul and h1 to display in one row (room permitting), you'll want inline-block:

<style>
.inlines {
  display: inline-block;
}
</style>

<div>

<h1 class="inlines">Heading</h1>

<ul class="inlines">
  <li><h4>Reason 1</h4></li>
  <li><h4>Reason 2</h4></li>
  <li><h4>Reason 3</h4></li>
  <li><h4>Reason 4</h4></li>
  <li><h4>Reason 5</h4></li>
</ul>

<h1 class="inlines">Hi</h1>
</div>

If you want the individual list items in the same single row, add:

.inlines li {
  display: inline-block;
}

For an example, see this CodePen: http://cdpn.io/GLhqK

Upvotes: 0

Hushme
Hushme

Reputation: 3144

ur using inline on on div and that is not applying on inner items

so try this

<style>div * {display:inline;}</style>

or make each item inline separately in css

as i understand from ur question u want

<div>

<h1 style="float:left;">Heading</h1>

<ul style="float:left;">
<li style="display:inline"><h4>Reason 1</h4></li>
<li style="display:inline"><h4>Reason 2</h4></li>
<li style="display:inline"><h4>Reason 3</h4></li>
<li style="display:inline"><h4>Reason 4</h4></li>
<li style="display:inline"><h4>Reason 5</h4></li>
</ul>

<h1 style="float:right;">Hi</h1>
</div>

Upvotes: 0

Related Questions