Keeping list item on one line

[awkward_clam]

I have a dropdown menu item, and I’d like the text to stay on one line and have the div get wider instead of the text taking up two lines.

Here’s the HTML

   <li id="prod-cat">
              <span>Shop For:</span>

          <div id="prod-cat-select">

            <span id="current-category">
              <a href="" id="current-category-text">Masks</a> 
              <span class="arrow">v</span>
            </span>
            
              <ol id="prod-cat-dropdown">
                
        
                                  
                
                <a class="inactive" href="/">
                  <li>Masks</li>
                </a>
                                  
                
                <a class="" href="/pages/top-hats">
                  <li>Top Hats</li>
                </a>
              
              </ol>
            
           </div> 
        </li>

And CSS:

#prod-cat-select {
  display: inline-block;
  margin-left: 5px;
  position: relative;
}


#current-category {
  display: inline-block;
  background-color: rgb(248,248,248);
  padding: 8px 10px;
  border: solid 1px #ddd;
  cursor: pointer;
}

#prod-cat-dropdown {
  position: absolute;
  top: 37px;
  z-index: 100;
  font-weight: 700;
  display: none;
  background-color: rgb(248,248,248);
  text-align: left;
  border: solid 1px #ddd;
  border-top: none;
 margin: 0;
}

How can I fix this? Only way I can think of is to set a fixed width for the dropdown li item.

[Erik_J]

First try something like this:

#prod-cat-dropdown a{
  white-space: nowrap;
}

[awkward_clam]

That did it! Thanks, I’ve never used that property before.

[RyanReese]

Why not make them table/table-cell? That will force them to stay on the same line. What you have now is almost band-aidy.