Twitter Bootstrap Question posted in

How to make a div and a link inline? – Twitter bootstrap

I want the div and a elementes below to appear inline:

The result should be like:

Here is: Link 1

But they didn’t work. So appreciate your hints. 

.inline {
  float: right;
  display: block;
}
a.inline {
  float: right;
}
<ul>
  <li>
    <div class="inline">Here is:</div>
    <a href="/someurl" class="inline">Link 1</a>
  </li>
</ul>

P.S. I’m using twitter bootstrap as css framework

Tags:

4

Answers


  1. 0

    display: inline will do the trick

    .inline{
  display: inline;
}
    <li>
<div class="inline">Here is: </div>
<a href="/someurl" class="inline">Link 1</a>
</li>
    Login or Signup to reply.
  2. 0

    Remove your a.inline styling and change your css to this:

    .inline {
  display: inline-block;
}
    Login or Signup to reply.
  3. 0

    Please add the link inside of the div element:

    <div class="inline">
  Here is: <a href="/someurl" class="inline">Link 1</a>
</div>
    Login or Signup to reply.
  4. 0

    I think @aer0 answer is correct and If you adding 

    .inline{
  display: inline;
}

    it should work. try to open your browser style console and see if it being override by some other css rule.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search