Why is it that the code below displays correctly in one line in both FF and IE, but Chrome for some reason is showing it on two lines as if both span and button elements had "display:block;"? Even though the button has a computed display of "inline-block," shouldn't it be rendered next to the span instead of below it?
This behavior seems consistent with any version of Bootstrap >= 3.
Can someone explain why Chrome behaves like this?
(And I'm not asking how to place those elements next to each other - I already discovered that it works correctly when using ul and li elements)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<link href="bootstrap-3.1.1/dist/css/bootstrap.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="bootstrap-3.1.1/dist/js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="nav navbar-nav">
<span class="navbar-text">User Name</span>
<button type="button" class="btn btn-default navbar-btn">Log out</button>
</div>
</div>
</nav>
</body>
</html>