html - Remove line break before unordered list-CodePudding

I'm working with a static site generator from github and want to move some lines to another place. Here is the golang template part I want to change -

{{ if ne (.Date.Format "2006-01-02") "2000-01-01" }}
    <h4>{{ .Date.Format "January 2, 2006" }}</h4>
{{ end }}
    <ul>
        <li><a href="/">•Home</a></li>
        {{ range .Topics }}
          <li><a href="/topics/#{{ . }}">•{{ . }}</a></li>
        {{ end }}
    </ul>

After the h4 date I get a new line in the browser. I want the unordered list items to go in the same line as the date with a little space between them. I've tried styling the ul as list-style-type: none; and display:inline; from another question but nothing seems to change it's position.

Looks like my only styling is this -

ul li {
  display: inline;
}

I scanned my other styling section for h4 and nothing is there.

CodePudding user response：

I'd recommend wrapping the elements in a parent element and using flexbox to align them side-by-side.

Like this:

.wrap {
  display: flex;
}

<div >
    {{ if ne (.Date.Format "2006-01-02") "2000-01-01" }}
        <h4>{{ .Date.Format "January 2, 2006" }}</h4>
    {{ end }}
    <ul>
        <li><a href="/">•Home</a></li>
        {{ range .Topics }}
          <li><a href="/topics/#{{ . }}">•{{ . }}</a></li>
        {{ end }}
    </ul>
</div>

CodePudding user response：

I added some code of @harryburk. Hope this helps!

.wrap {
  display: flex;
}

ul{
  list-style: none;
  display: flex;
}

li{
  margin-right: 10px;
}

CodePudding user response：

More playing around and reading, I found this works fine in my styling -

ul {
  display: inline;
}
ul li {
  display: inline;
}
h4 {
  display: inline;
}