Aligning elements together on same row html

Question

In my application I have the following code

        <ul data-role="listview" data-filter="true" data-filter-placeholder="Search for something..." data-inset="true">
        </ul>

        <a href="#popupNested" style="text-align: right" data-rel="popup"  data-transition="pop"><span class="material-icons"> filter_alt </span></a>

These 2 elements are currently on 2 sperate rows. How can I make them in the same horizontal row?

Nope that doesnt do it, tried after wrapping the anchor tag as well — dev_tech, Jan 18 '21 at 03:06
forgot to add the block. It workign perfectly fine for me and is a common way to do it — tacoshy, Jan 18 '21 at 03:07

score 1 · Answer 1 · answered Jan 18 '21 at 03:10

<ul> is a block level element. Means it will be displayed below other elements and the following element will be displayed below the unordered list. If you change the ul to an inline-block element, it will go inline with other inline elements such as a link a.

ul {
  display: inline-block;
  list-style: none;
}

<ul>
  <li>List Item</li>
</ul>
<a href="#">Link</a>

Aligning elements together on same row html

1 Answers1