-3
。 （添付画像を参照し、ボックスは同じサイズとお互いから等距離にあるふりを）私は、ボタンを再したくないを除いて、私の問題は、私はボックスがページの中央に関係なく、ブラウザのウィンドウサイズになりたいということですページが小さくなりすぎるとサイズが大きくなります。私はこれを行う方法で空白を描いていますが、それは難しくないようです。HTML/CSS 4つのリンク/ボタン
body{
\t font-family: Arial, Helvetica, Sans-Serif;
\t font-size:1em;
\t padding:0;
\t margin:0;
}
#content{
\t position:relative;
}
/* Banner Styling */
#banner {
\t display:inline-block;
}
#banner a{
\t text-decoration:none;
\t color:black;
}
#banner h1{
\t float:left;
\t padding-left:1em;
\t padding-right:auto;
}
#banner #logo{
\t position:absolute;
\t top:0px;
\t right:0px;
}
/* Navigation Styling */
Nav {
\t margin-top:2em;
}
Nav ul{
\t margin:0;
\t padding:0;
\t overflow:hidden;
\t list-style-type:none;
\t background-color: #1666af;
\t padding-left:2em;
\t min-width:1532px;
}
Nav ul li{
\t float:left;
\t text-align:center;
\t
}
Nav li a{
\t border: 1px solid #1666af;
\t padding:.3em 2em .3em 2em;
\t display: block;
\t background-color: #1666af;
\t color:White;
\t text-decoration:none;
}
Nav .current{
\t background-color:green;
\t border:1px solid green;
}
Nav li a:hover{
\t border: 1px solid #278efc;
\t background-color:#278efc;
}
/* BUTTONS */
#buttons{
\t position:relative;
\t left:50%;
}
#buttons a{
\t width:330px;
\t height:210px;
\t display:inline-block;
\t text-align:center;
\t color:white;
\t text-decoration:none;
\t border-radius:6px;
\t margin-top:50px;
\t box-sizing:border-box;
\t padding-top:89px;
}
/* CDW Button */
#button1{
\t border:1px solid black;
\t background-color:green;
\t transition: background-color 1.0s;
}
#button1:hover{
\t background-color:yellow;
}
/* ADR button */
#button2{
\t border:1px solid black;
\t background-color:blue;
\t transition: background-color 1.0s;
}
#button2:hover{
\t background-color:red;
}
/* GoGatway Button */
#button3{
\t border:1px solid black;
\t background-color:red;
\t transition: background-color 1.0s;
\t height:60px!important;
\t padding-top:20px!important;
}
#button3:hover{
\t background-color:teal;
}
/* AAS button */
#button4{
\t border:1px solid black;
\t background-color:orange;
\t transition: background-color 1.0s;
\t height:60px!important;
\t padding-top:20px!important;
}
#button4:hover{
\t background-color:brown;
}<!DOCTYPE html>
<html>
\t <head>
\t <link href="css/styles.css" rel="stylesheet" type="text/css" />
\t \t <title>Website</title>
\t </head>
\t <body>
\t <div id="content">
\t \t <div id="banner">
\t \t <h1><a href="default.htm">Website</a></h1>
\t \t \t <img id="logo" src="images/imagehere" alt="imagehere" />
\t \t </div>
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li><a class="current" href="default.htm"> Home</a></li>
\t \t \t \t <li><a href="Placeholder.htm">Placeholder</a></li>
\t \t \t \t <li><a href="Placeholder.htm">Placeholder</a></li>
\t \t \t \t <li><a href="Placeholder.htm">Placeholder</a></li>
\t \t \t \t <li><a href="Placeholder.htm">Placeholder</a></li>
\t \t \t \t <li><a href="Placeholder.htm">Placeholder</a></li>
\t \t \t </ul>
\t \t </nav>
\t \t
\t \t <div id=buttons>
\t \t \t <a href="button1.htm" id="button1">Placeholder</a>
\t \t \t <a href="button2.htm" id="button2">Placeholder</a>
\t \t \t <a href="button3.htm" id="button3">Placeholder</a>
\t \t \t <a href="button4.htm" id="button4">Placeholder</a>
\t \t </div>
\t \t
\t </div>
\t
\t </body>
</html>
、あなたの質問をしてください修正します。コードなしでJSFiddleにリンクすることはできません。周りを回るために不正行為をしようとしないで、あなたがそれを普通にやめない理由があります。投稿する前に質問のガイドラインをお読みください。 – Blubberguy22
それについて申し訳ありません、私は本当にサイトが私に何をするように求めていたのか理解しませんでした。誰かが親切にも私のためにそれを編集することでした、私は編集リンクはCTRL-Fがなかったどこでも私は、ブートストラップのようなもので動作するようになって提案する – HaydenHanson