Mark Mark - 6 days ago 5
HTML Question

Float a <ul> to the right, but let <li> tags inside it have a line break

Here is a jsfiddle:
https://jsfiddle.net/ny7f18y9/

<header class="site-header">
<div class="title-area">
<p class="site-title" itemprop="headline"><a href="#">Home</a></p>
</div>
<div class="widget-area header-widget-area">
<section id="nav_menu-30" class="widget widget_nav_menu">
<div class="widget-wrap">
<nav class="nav-header">
<ul id="menu-top-menu">
<li id="menu-item-1210" class="menu-item">
<a href="#"><span itemprop="name">Locations &amp; Hours</span></a>
</li>
<li id="menu-item-1212" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1212">
<a target="_blank" href="#" itemprop="url"><span itemprop="name">My Account</span></a>
</li>
<li id="menu-item-8693" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8693">
<a href="#" itemprop="url"><span itemprop="name">Catalog</span></a>
</li>
<li id="menu-item-9150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9150">
<a href="#" itemprop="url"><span itemprop="name">How Do I…</span></a>
</li>
<li id="menu-item-2348" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2348">
<a href="#" itemprop="url"><span itemprop="name">Contact Us</span></a>
</li>
</ul>
</nav>
</div>
</section>
</div>
</header>


CSS:

.menu-item {
display: inline-block;
}

.site-title, .site-title a, .title-area {
width: 260px;
}

.site-header {
background: rgba(0, 0, 0, 0) url("http://placehold.it/260x89") no-repeat scroll 0 0 !important;
}

.site-title, .site-title a, .title-area {
float: left;
height: 89px;
overflow: hidden;
text-indent: -5000px;
}

.site-header {
min-height: 90px;
overflow: hidden;
}

#menu-top-menu {
float:right;
}


I have a nav area that floats to the right of a logo, which is all the way left. The ul tag inside the nav area has {float:right} as a part of its CSS. I would like to see the li elements stay in a horizontal line, but make a line break when the width of the ul is too wide for the space between the image and the right edge of the parent element.

The below image is what I would like (although the links are reversed which is not what I want - I only need the ul to make a line break when the width is too narrow):

This is what I would like

I would like the nav area to stay floated to the right of the logo, and break lines when necessary. Right now it maintains an inline-block line, and goes to a new line (below the image) when it doesn't have enough room to fit to the right of the logo.

I've researched many questions here at Stack Overflow, but most people want the opposite - to not break lines; they are floating their li tags to the right. I wish I could do that, but then the li tags show in reverse order. Otherwise I can't find on Google or here the true answer that I need.

This issue is evident when I reduce the browser's width, and so it causes a problem with responsiveness. I prefer not to have to reverse the order of my li tags - that seems like poor practice.

[1]: https://jsfiddle.net/ny7f18y9/

Answer

You don't want the ul to float right, you want it to text-align right.

So that's all you need to change.

.menu-item {
  display: inline-block;
}

.site-title, .site-title a, .title-area {
  width: 260px;
}

.site-header {
  background: rgba(0, 0, 0, 0) url("http://placehold.it/260x89") no-repeat scroll 0 0 !important;
}

.site-title, .site-title a, .title-area {
  float: left;
  height: 89px;
  overflow: hidden;
  text-indent: -5000px;
}

.site-header {
  min-height: 90px;
  overflow: hidden;
}

#menu-top-menu {
  text-align:right; /* this */
}
<header class="site-header">
<div class="title-area">
  <p class="site-title" itemprop="headline"><a href="#">Home</a></p>
 </div>
 <div class="widget-area header-widget-area">
   <section id="nav_menu-30" class="widget widget_nav_menu">
   <div class="widget-wrap">
     <nav class="nav-header">
       <ul id="menu-top-menu">
         <li id="menu-item-1210" class="menu-item">
           <a href="#"><span itemprop="name">Locations &amp; Hours</span></a>
        </li>
        <li id="menu-item-1212" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1212">
          <a target="_blank" href="#" itemprop="url"><span itemprop="name">My Account</span></a>
         </li>
        <li id="menu-item-8693" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8693">
          <a href="#" itemprop="url"><span itemprop="name">Catalog</span></a>
        </li>
        <li id="menu-item-9150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9150">
          <a href="#" itemprop="url"><span itemprop="name">How Do I…</span></a>
        </li>
        <li id="menu-item-2348" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2348">
          <a href="#" itemprop="url"><span itemprop="name">Contact Us</span></a>
        </li>
      </ul>
    </nav>
  </div>
  </section>
</div>
</header>