背景
我正在尝试为git repo网络查看器创建模板，以使其与我网站的其余部分更好地匹配。我从顶部导航栏开始。我已经能够放置想要的项目：徽标，菜单项链接，选择分支菜单和搜索框。
问题
我首先将div容器放入选择菜单，然后将div容器放入搜索框。但是，两者以相反的顺序出现。我希望它们按照正确的顺序放回代码中。
代码
注意：为获得最佳效果，请使用宽窗口。一旦有效，我将致力于响应能力。
/*
* Add a black background color to the top navigation
*/
.topnav {
overflow: hidden;
background-color: #444;
}
/*
* Make a style for fixing the menu to the top.
*/
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/*
* Style the links inside the navigation bar
*/
.topnav a {
float: left;
display: block;
color: #eee;
text-align: center;
padding: 12px 12px;
text-decoration: none;
font-size: 16pt;
}
/*
* Add an active class to highlight the current page
*/
.active {
background-color: #6666;
color: #eee;
}
/*
* Style image in topnav.
*/
.logo {
width: 20px;
height: 20px;
}
/*
* Style image in topnav.
*/
.topnav-image a {
float: left;
display: block;
color: #eee;
text-align: center;
text-decoration: none;
font-size: 16pt;
}
/*
* Right-aligned section inside the top navigation
*/
.topnav-right {
float: right;
}
/*
* Style the right aligned links inside the navigation bar
*/
.topnav-right a {
font-size: 16pt;
}
/*
* Hide the link that should open and close the topnav on
* small screens
*/
.topnav .icon {
display: none;
}
/*
* Change the color of links on hover
*/
/*
* Add a dark background on topnav links and the dropdown button on hover
*/
.topnav a:hover {
background-color: #555;
color: #fff;
}
.topnav .branch-container {
float: right;
}
.topnav .branch-container select {
padding: 5px;
margin: 4px;
border: none;
border-radius: 8px;
font-size: 16pt;
color: #eeeeee;
background-color: #666666;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin: 4px;
font-size: 16pt;
border: none;
border-radius: 8px;
background: #666666;
color: #eeeeee;
}
.topnav .search-container button {
/*float: right;*/
/*padding: 10px 10px;*/
display: none;
margin-top: 4px;
margin-right: 8px;
background: #ddd;
font-size: 16px;
border: none;
cursor: pointer;
background: #444;
color: #eee;
}
.topnav .search-container button:hover {
background: #666;
color: #eee;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #eee;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #eee;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #eee;
}
/*
* Format the footer.
*/
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #cccccc;
color: black;
}
/*
* Style the links inside the footer.
*/
.footer a {
float: left;
display: block;
color: black;
text-align: center;
padding: 8px 8px;
text-decoration: none;
font-size: 12pt;
}
/*
* Right-aligned section inside the footer.
*/
.footer-right {
float: right;
}
/*
* Hover effect of footer items.
*/
.footer a:hover {
background-color: #dddddd;
color: black;
}
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/*
* Format the main content.
*/
.main {
/*padding: 16px;*/
margin-top: 70px;
margin-left: 16px;
margin-right: 16px;
margin-bottom: 50px;
}
h1.title {
font-weight: normal;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Repos: Ali Kakakhel</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div class="fixed">
<nav class="topnav" id="mytopnav">
<div class="topnav-image">
<a href="https://git.kakakhel.io"><img src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png" class="logo"></a>
</div>
<a href="https://git.kakakhel.io/RepoName/SummaryPage">RepoName</a>
<div class="topnav-right">
<a href="https://git.kakakhel.io/RepoName/AboutPage">About</a>
<a href="https://git.kakakhel.io/RepoName/SummaryPage" class="active">Summary</a>
<a href="https://git.kakakhel.io/RepoName/RefsPage">Refs</a>
<a href="https://git.kakakhel.io/RepoName/LogPage">Log</a>
<a href="https://git.kakakhel.io/RepoName/TreePage">Tree</a>
<a href="https://git.kakakhel.io/RepoName/CommitPage">Commit</a>
<a href="https://git.kakakhel.io/RepoName/DiffPage">Diff</a>
<a href="https://git.kakakhel.io/RepoName/StatsPage">Stats</a>
<div class="branch-container">
<select>
<option value="Master">Master</option>
<option value="Branch1">Branch1</option>
<option value="Branch2">Branch2</option>
<option value="Branch3">Branch3</option>
</select>
</div>
<div class="search-container">
<form action="/action_page.php">
<input type="text" id="SearchInput" placeholder="Search...">
<button type="submit" id="SearchButton" onclick="javascript:alert('Hello World!')"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</nav>
</div>
<div class="main">
<h1 class="title">Title</h1>
<p>
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated they
live in Bookmarksgrove right at the coast of the Semantics, a large
language ocean. A small river named Duden flows by their place and
supplies it with the necessary regelialia. It is a paradisematic
country, in which roasted parts of sentences fly into your mouth.
</p>
</div>
<div class="footer" id="myfooter">
<a>Description</a>
<div class="footer-right">
<a>Owner</a>
</div>
</div>
<script>
var input = document.getElementById("SearchInput");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("SearchButton").click();
}
});
</script>
</body>
</html>