<!DOCTYPE HTML> <html> <head> <title>RTL list displayed as inline broken</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> ul { padding: 3px 10px; border-bottom: 3px solid #4949A9; white-space: nowrap; font-size: 13px; direction: rtl; text-align: left; } ul li { display: inline; margin: 0; padding: 3px 10px; border-top: 1px solid gray; border-right: 1px solid gray; border-left: 1px solid gray; background-color: #f0f0f0; } </style> </head> <body> <h1>Broken RTL list when displayed as inline</h1> <h2>One Item</h2> <ul class="tabs"> <li>Tab</li> </ul> <h2>Two Items</h2> <ul class="tabs"> <li>Tab</li> <li>Tab</li> </ul> <h2>Many</h2> <ul class="tabs"> <li>Tab</li> <li>Tab</li> <li>Tab</li> <li>Tab</li> <li>Tab</li> <li>Tab</li> <li>Tab</li> <li>Tab</li> <li>Tab</li> <li>Tab</li> </ul> </body> </html>