0
Ich mache eine Website mit einem Navigationsmenü auf der Oberseite. Ich habe mehrere Tasten mit Dropdown-Menüs. Ich möchte die Knöpfe in einer Reihe auf der gleichen Höhe machen und ich möchte, dass die Knöpfe in der Mitte sind. Hier ist mein Code:HTML und CSS machen mehrere Divs auf der gleichen Linie ausgerichtet
/* Links CSS */
a,
a:visited,
a:active {
text-decoration: underline;
color: white;
}
a:hover {
color: red;
text-decoration: underline;
}
/* Element CSS */
html,
body {
margin: 0px;
background-color: white;
}
html {
height: 100%;
width: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
padding-bottom: 6rem;
min-height: 100%;
}
.button,
.games,
.programs,
.apps,
.misc {
font-family: 'Arsenal';
font-size: 18px;
text-decoration: underline;
background: transparent;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1.5%;
padding-right: 1.5%;
cursor: pointer;
border: 0px;
}
.content {
font-family: 'Arsenal';
font-size: 15px;
text-decoration: none;
background-color: white;
border: 0px;
cursor: pointer;
}
.button:hover,
.content:hover,
.games:hover,
.programs:hover,
.apps:hover,
.misc:hover {
background-color: #f0efef;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
padding: 0.5%;
}
.games-dropdown {
position: relative;
display: inline-block;
}
.progams-dropdown {
position: relative;
display: inline-block;
}
.apps-dropdown {
position: relative;
display: inline-block;
}
.misc-dropdown {
position: relative;
display: inline-block;
}
.show {
display: block;
}
/* Div CSS */
#page {
margin-top: 0px;
}
#title {
font-family: 'Arsenal';
font-size: 37px;
padding-top: 0.5%;
color: black;
display: inline-block;
cursor: pointer;
}
#links {
margin: auto;
display: inline-block;
overflow: auto;
}
#content {
background-color: white;
border: 1px solid black;
border-radius: 3px;
margin-left: 10%;
margin-right: 10%;
box-shadow: 1px 1.5px #8f8f8f;
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #f0efef;
text-align: center;
border-top: 1px solid black;
font-family: 'Arsenal';
font-size: 15px;
}<!-- HTML -->
<center>
<div id="links">
<!-- Code For Dropdown Menus | Code From http://www.w3schools.com/ | Thanks To Them!-->
<!-- Games Dropdown Menu: Browser and Downloadable-->
<div class="programs-dropdown">
<button class="programs" onclick="games()" title="Games">Games</button>
<div id="gamesDropdown" class="dropdown-content">
<button class="content" onclick="download()">Download</button>
<button class="content" onclick="online()">Online</button>
</div>
</div>
<!-- Programs Dropdown Menu: Windows and Max OS X-->
<div class="programs-dropdown">
<button class="programs" onclick="programs()" title="Programs">Programs</button>
<div id="programsDropdown" class="dropdown-content">
<button class="content" onclick="windows()">Windows</button>
<button class="content" onclick="mac()">Mac OS X</button>
</div>
</div>
<button class="button" onclick="websites()" title="Websites">Websites</button>
<button class="button" onclick="home()" title="Home">Home</button>
<!-- Apps Dropdown Menu: IOS and Android -->
<div id="apps-dropdown">
<button class="apps" onclick="apps()" title="Apps">Apps</button>
<div id="appsDropdown" class="dropdown-content">
<button class="content" onclick="ios()">IOS</button>
<button class="content" onclick="android()">Android</button>
</div>
</div>
<button class="button" onclick="blog()" title="Blog">Blog</button>
<!-- Misc. Dropdown Menu: Chrome Extensions, GitHub, Etc.-->
<div id="misc-dropdown">
<button class="misc" onclick="misc()" title="Misc.">Misc.</button>
<div id="miscDropdown" class="dropdown-content">
<button class="content" onclick="chrome()">Chrome Extensions</button>
<button class="content" onclick="github()">GitHub</button>
</div>
</div>
</div>
</center>