buttons between a line of text

Question

I have several buttons at the beginning and in-between a line of text.

Its fine for the button at the beginning of the text but I cant manage to have the other buttons in between the text. If I remove float left they disappear and if I keep it, they are all displayed in front of the text as shown below:

Here is a Fiddle with the current code: https://jsfiddle.net/bb61c412/133/

And the code:

 a.previous {
   padding-top: 100px;
   float: left;
   border-radius: 0px;
   height: 50px;
   width: 50px;
   background-color: #538E92;
   background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Star_in_Blue_Box_-_Flag_of_Liberia.svg/50px-Star_in_Blue_Box_-_Flag_of_Liberia.svg.png') center no-repeat;
   display: inline;
 }
 a.next {
   float: left;
   border-radius: 0px;
   height: 30px;
   width: 30px;
   background: url('http://www.etudiant.ma/img/arrow-next.png') center no-repeat;
   background-color: #FFFFFF;
   display: inline;
 }
 h1 {
   display: inline;
 }
 p {
   display: inline;
 }

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />

<div>
  <a href="#" class="previous"></a>
  <h1>Hello</h1>
  <a href="#">
    <p id="now">title 1</p>
  </a>
  <a href="#" class="next">
    <a href="#"></a>
    <p>title 2</p>
  </a>
  <a href="#" class="next"></a>
  <a href="#">
    <p>title 3</p>
  </a>
  <a href="#" class="next"></a>
  <a href="#">
    <p>title 4</p>
  </a>

</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

You could fix this by adding the following lines :

a.previous ~ * {
    display: block;
    float: left;
    margin-top: 35px;
    vertical-align: middle;
    padding-top: 4px;
    height: 40px;
}

a.previous ~ h1 {
    margin: 25px 10px 0 10px;
}

---

Demo

a.previous {
    padding-top: 100px;
    float: left;
    border-radius: 0px;
    height: 50px;
    width: 50px;
    background-color: #538E92;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Star_in_Blue_Box_-_Flag_of_Liberia.svg/50px-Star_in_Blue_Box_-_Flag_of_Liberia.svg.png') center no-repeat;
    display: inline;
}
 
a.previous ~ * {
    display: block;
    float: left;
    margin-top: 35px;
    vertical-align: middle;
    padding-top: 4px;
    height: 40px;
}
 
a.previous ~ h1 {
    margin: 25px 10px 0 10px;
}
 
a.next {
    float: left;
    border-radius: 0px;
    height: 30px;
    width: 30px;
    background: url('http://www.etudiant.ma/img/arrow-next.png') center no-repeat;
    background-color: #FFFFFF;
    display: inline;
}
 
h1 {
    display: inline;
}

p {
    display: inline;
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<div>
    <a href="#" class="previous"></a>
    <h1>Hello</h1>
    <a href="#">
        <p id="now">title 1</p>
    </a>
    <a href="#" class="next">
        <a href="#"></a>
        <p>title 2</p>
    </a>
    <a href="#" class="next"></a>
    <a href="#">
        <p>title 3</p>
    </a>
    <a href="#" class="next"></a>
    <a href="#">
        <p>title 4</p>
    </a>
</div>

(See also this Fiddle)

Answer 2

You'd just have to set the display as inline-block for all the elements and use vertical-align to get them aligned as required.

For the purpose of semantics, do not use a p unless the content is a paragraph. Here you could just replace them with span (as already pointed out in the other answer).

The below points are for completeness perspective:

• When you remove the float: left, the images disappear because the element's display is set to inline (a elements are anyway inline by default). Inline elements do not have a set height or width and hence they cannot have background-image like mentioned here.
• epascarello has a very valid point in his comment. If the images are just for display and doesn't do anything else then it is better to use pseudo-elements instead of adding extra real elements. The CSS though would still remain the same.

a.previous {
  display: inline-block;
  border-radius: 0px;
  height: 50px;
  width: 50px;
  background-color: #538E92;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Star_in_Blue_Box_-_Flag_of_Liberia.svg/50px-Star_in_Blue_Box_-_Flag_of_Liberia.svg.png') center no-repeat;
}
a.next {
  display: inline-block;
  border-radius: 0px;
  height: 30px;
  width: 30px;
  background: url('http://www.etudiant.ma/img/arrow-next.png') center no-repeat;
  background-color: #FFFFFF;
  margin-bottom: 10px;
}
h1 {
  display: inline-block;
}
span {
  display: inline-block;
  margin-bottom: 18px;
}
div * {
  vertical-align: bottom;
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />

<div>
  <a href="#" class="previous"></a>
  <h1>Hello</h1>
  <a href="#">
    <span id="now">title 1</span>
  </a>
  <a href="#" class="next">
    <a href="#"></a>
    <span>title 2</span>
  </a>
  <a href="#" class="next"></a>
  <a href="#">
    <span>title 3</span>
  </a>
  <a href="#" class="next"></a>
  <a href="#">
    <span>title 4</span>
  </a>

</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 3

Use span instead of p

  <div>
    <a href="#" class="previous"></a>
    <h1>Hello</h1>
    <a href="#">
      <span id="now">title 1</span>
    </a>
    <a href="#" class="next">
      <a href="#"></a>
      <span>title 2</span>
    </a>
    <a href="#" class="next"></a>
    <a href="#">
      <span>title 3</span>
    </a>
    <a href="#" class="next"></a>
    <a href="#">
      <span>title 4</span>
    </a>

  </div>