Search code examples
htmlcssinlinetext-styling

Why each word is in a separate line?

I have a problem, it is weird, I thought I have finished a task but I was playing with the browser and then boom, a problem, so I have a container with flex displaying, it contains links elements, each element has a text, but now, the text is not displayed correctly, I don't know why, is it because of flex displaying of the parent ? I don't know, here is what I want to achieve :

enter image description here

But that is what I get :

[![enter image description here][2]][2] enter image description here

I don't get that return, why is that ?

Here is my html code : 

    <div class="header__options">
        <a href="#" onclick="showDetails(0)">
            Dernières minutes
        </a>
        <a href="#" onclick="showDetails(1)">
            Vol
        </a>
        <a href="#" onclick="showDetails(2)">
            Séjour
        </a>
        <a href="#" onclick="showDetails(3)">
            Location
        </a>
        <a href="#" onclick="showDetails(4)">
            Camping
        </a>
        <a href="#" onclick="showDetails(5)">
            Hôtel
        </a>
        <a href="#" onclick="showDetails(6)">
            Train
        </a>
    </div>

And my css : 

.header__options a {

    margin-right: 20px;
    position: relative;

    font-size: 14px;

    text-decoration: none;

    color: #ffffff;
    font-family: Arial, sans-serif;
}

Any help would be much appreciated.

Solution

  • Adding white-space: nowrap will ensure that the element text does not wrap, and stays on one line.

    .header__options {
  background: black;
}
.header__options a {
  margin-right: 20px;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  font-family: Arial, sans-serif;
  
  /* Add white-space: nowrap */
  white-space: nowrap;
}
    <div class="header__options">
    <a href="#" onclick="showDetails(0)">
        Dernières minutes
    </a>
    <a href="#" onclick="showDetails(1)">
        Vol
    </a>
    <a href="#" onclick="showDetails(2)">
        Séjour
    </a>
    <a href="#" onclick="showDetails(3)">
        Location
    </a>
    <a href="#" onclick="showDetails(4)">
        Camping
    </a>
    <a href="#" onclick="showDetails(5)">
        Hôtel
    </a>
    <a href="#" onclick="showDetails(6)">
        Train
    </a>
</div>