SyntaxFix

[html] How to make a HTML list appear horizontally instead of vertically using CSS only?

Using display: inline-flex

_x000D_
_x000D_ 
#menu ul {_x000D_
  list-style: none;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
  display: inline-flex_x000D_
}
_x000D_ 
<div id="menu">_x000D_
  <ul>_x000D_
    <li>1 menu item</li>_x000D_
    <li>2 menu item</li>_x000D_
    <li>3 menu item</li>_x000D_
  </ul>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Using display: inline-block

_x000D_
_x000D_ 
#menu ul {_x000D_
  list-style: none;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
}_x000D_
_x000D_
#menu li {_x000D_
  display: inline-block;_x000D_
}
_x000D_ 
<div id="menu">_x000D_
  <ul>_x000D_
    <li>1 menu item</li>_x000D_
    <li>2 menu item</li>_x000D_
    <li>3 menu item</li>_x000D_
  </ul>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Examples related to html

• Embed ruby within URL : Middleman Blog • Please help me convert this script to a simple image slider • Generating a list of pages (not posts) without the index file • Why there is this "clear" class before footer? • Is it possible to change the content HTML5 alert messages? • Getting all files in directory with ajax • DevTools failed to load SourceMap: Could not load content for chrome-extension • How to set width of mat-table column in angular? • How to open a link in new tab using angular? • ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width • What is the hamburger menu icon called and the three vertical dots icon called? • Changing text color of menu item in navigation drawer • How to get selected value of a dropdown menu in ReactJS • Android custom dropdown/popup menu • Creating a Menu in Python • How to make a 3-level collapsing menu in Bootstrap? • how to set active class to nav menu from twitter bootstrap • How to make jQuery UI nav menu horizontal? • Twitter Bootstrap add active class to li • Adding a right click menu to an item

Examples related to positioning

• jQuery position DIV fixed at top on scroll • CSS transition effect makes image blurry / moves image 1px, in Chrome? • How can I fill a div with an image while keeping it proportional? • In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document? • sizing div based on window width • Make div stay at bottom of page's content all the time even when there are scrollbars • How to position the div popup dialog to the center of browser screen? • How do I center an SVG in a div? • CSS: Position text in the middle of the page • Stopping fixed position scrolling at a certain point?

Examples related to horizontallist

• How to make a HTML list appear horizontally instead of vertically using CSS only?