There are several approaches to achieve that. You have the option to use inline, inline-block, or flexboxes. To understand the distinction between inline and inline-block better, you can check out this resource. However, I personally find flexboxes to be more convenient and versatile.
Inline : Not the most ideal choice.
Inline elements have limitations as they only support margin-left, margin-right, padding-left, padding-right. Additionally, they lack a height attribute.
Inline-block : A superior option.
Inline-block elements allow for margin, padding, width, height. They are useful for vertical alignment.
However, managing white spaces between elements can be challenging at times.
Floats : A viable solution.
Floats are commonly used in layout frameworks. They are convenient and well-documented due to their longstanding presence in web design.
Flexboxes : Likely the best choice currently.
Flexboxes offer great flexibility, supporting all previous attributes and additional features.
The order of items is not tied to the source, allowing for direct arrangement in the CSS, which is beneficial for responsive designs. Flexboxes also enable equal-height elements.
Despite their advantages, flexboxes can be intricate to grasp. The syntax may not be intuitive, and template structures can become overly complex with excessive div containers.
/* Inline example */
.inline li {
display: inline;
}
/* Inline-block example */
.inline-block li {
display: inline;
}
/* Floats example */
.float li {
float: left;
}
/* Flexboxes example */
.flexboxes ul {
display: flex;
}
.flexboxes .menu-item {
flex: 2;
}
.flexboxes .site-title {
flex: 1;
}
/* Common */
ul {
list-style-type: none;
}
div {
width: 100%;
}
li {
background-color: #ccc;
}
<div class="inline">
<ul>
<li>Site Title</li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="inline-block">
<ul>
<li>Site Title</li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="float">
<ul>
<li class="site-title">Site Title</li>
<li class="menu-item"><a href="#">One</a></li>
<li class="menu-item"><a href="#">Two</a></li>
<li class="menu-item"><a href="#">Three</a></li>
</ul>
</div>
<br>
<div class="flexboxes">
<ul>
<li class="site-title">Site Title</li>
<li class="menu-item"><a href="#">One</a></li>
<li class="menu-item"><a href="#">Two</a></li>
<li class="menu-item"><a href="#">Three</a></li>
</ul>
</div>