[SOLVED] How to prevent line breaks in this case ? HTML

Issue

This Content is from Stack Overflow. Question asked by mee553

How browser shows “my” code

<html>
    <head>
        <title> chatter|app </title>

        <style>
            .styled_dates {
                font-size: 11px;
        
            }
        </style>
    
    </head>>
<body>
    <h1> chatter|app </h1>
    
    <h2> Favorites </h2>
    
    <p> <strong>Neversea</strong> <p class="styled_dates"> 11/07/2022 </p> 
    <p> <strong>Deutschland</strong> <p class="styled_dates"> 23/05/2019 </p>
    <p> <strong>Erasmus</strong> <p class="styled_dates"> 23/06/1999 </p>
    <p> <strong>Work</strong> <p class="styled_dates"> 04/07/2003 </p>

    <h2> Regular </h2>> 
</body>
</html>

Hello. Noobie here.

What I want to do: see the dates next to “Neversea, Deutschland, Erasmus, Work”, not underneath them.

Neversea 11 07/2022

not…

Neversea
11/07/2022

How can I do that?

Thank you



Solution

The issue is that <p> tags by default follow onto the next line. Also you have unclosed tags (each line you open 2 and only close 1)

In my code I use <span> elements, they are made for in-line styling/changes which seems appropriate for your use case.

.styled_dates {
  font-size: 11px;
}
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p>
  <strong>Neversea</strong>
  <span class="styled_dates">11/07/2022</span>
</p>
<p>
  <strong>Deutschland</strong>
  <span class="styled_dates">23/05/2019</span>
</p>
<p>
  <strong>Erasmus</strong>
  <span class="styled_dates">23/06/1999</span>
</p>
<p>
  <strong>Work</strong>
  <span class="styled_dates">04/07/2003</span>
</p>
<h2> Regular </h2>


This Question was asked in StackOverflow by mee553 and Answered by actuallyatiger It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?