1
私のページに水平にナビゲーションメニューを配置しようとしています。テキストを試しました：alignとmargin：0とdisplay：inlineですが、何も動作しません。私は問題が何であるか知っていると思う。私は実際にテキストをブロックの中央に配置しようとはしていません。私はすでにそれをしています。私はページ上にブロックを中央に配置しようとしているので、まっすぐ真ん中にある直線です。あなたが見ることができるように、私のnavメニューは線ではなく、むしろ同じ "ul"要素内に囲まれた一連のブロックです。だから私の質問は、どのように私はブロックを水平に完全に一直線にページ上の中心になるようにするのですか？ 私はダブルアスタリクスをHtmlからCssへのフォルダパスの周りに置いていますので、あなたがそれをあなたのコンピュータに保存されている場所に変更することができます実行する。CSSのNavメニューを水平に配置するにはどうすればよいですか？
マイCSS：
body {
width: 75%;
min-width: 720px;
margin: 0 auto;
/*vertical center*/
font-size: 1em;
font-weight: bold;
font-family: "Century Gothic", Palatino, Georgia, Serif;
color: #02849D;
/*dark navy blue*/
text-align: left;
/*Personal Addition*/
background-image: url('../Images/Black_Rainbow.jpg');
background-size: 175% 100%;
/*mess with*/
background-repeat: no-repeat;
/*boxing, borders, and padding*/
margin-left: 10%;
margin-right: 10%;
padding: 0.35em;
border-style: double;
border-color: #006E5F;
border-width: 4px;
border-width: 4px;
}
h1 {
font-family: Rockwell, Baskerville, Warnock, Serif;
font-size: 2.2em;
font-weight: bold;
color: #02849D;
text-align: center;
padding: 0.75em;
border-style: solid;
border-color: #006E5F;
border-width: 4px;
}
h2, h3 {
font-family: Rockwell, Baskerville, Warnock, Serif;
font-size: 1.5em;
margin-left: 10%;
margin-right: 10%;
padding: 0.5em;
border-style: solid;
border-color: #006E5F;
border-width: 3px;
margin: 1em;
}
.box {
/*a class tag that I use for my div elements, since I didn't want this to apply for all of my div elements I made a class so that I can easily state whether or not it should apply*/
margin-left: 10%;
margin-right: 10%;
padding: 0.35em;
border-style: solid;
border-color: #006E5F;
border-width: 3px;
margin: 1em;
background-color: #111111;
}
p {
margin-left: 10%;
margin-right: 10%;
padding: 0.35em;
border-style: solid;
border-color: #00594D;
border-width: 5px;
margin: 1em;
}
ul {
margin-left: 10%;
margin-right: 10%;
padding: 0.35em;
border-style: solid;
border-color: #00594D;
border-width: 5px;
margin: 0.35em;
}
table {
border: 0.2em solid black;
background-color: white;
}
th {
border: 0.15em solid black;
padding: 0.35em;
text-align: center;
font-weight: bolder;
}
td {
border: 1px solid black;
padding: 0.35em;
color: black;
font-weight: normal;
}
a:link {
color: #31AEC5;
/*dark blue*/
}
a:visited {
color: #015261;
/*darker blue*/
}
a:hover,
a:focus {
color: #505050;
/*grey*/
}
nav {
clear: left;
font-size: 1.2em;
}
.gamebutton {
background-color: #707070;
/*grey*/
border: none;
color: #02849D;
/*bright blue*/
width: 450px;
height: 75px;
text-align: center;
line-height: 75px;
/*centers the text vertically*/
text-decoration: none;
display: inline-block;
font-size: 1.1em;
font-family: Century Gothic;
font-weight: bold;
}
.info {
width: 40%;
font-size: 1.25em;
float: left;
}
.temp {
font-style: italic;
}
#main {
color: #008B8B;
clear: left;
}
#overview {
color: #7FFFD4;
}
#overview:first-letter {
font-size: 1.3em;
font-family: "Times New Roman", sans-serif;
}
#DigDug {
float: right;
position: absolute;
right: 0;
border-width: 0;
}
#DigCaption {
position: absolute;
left: 833.5px;
bottom: 10px;
font-size: 13px;
}
#BlockGame {
float: right;
position: absolute;
right: 550px;
border-width: 0;
}
#skipnav {
position: relative;
right: 12.5%;
width: 10.5em;
}
/* navigation menu styles */
nav ul {
list-style-type: none;
border: 0;
padding-bottom: 1em;
}
nav ul li {
float: left;
margin-right: 1em;
}
nav ul li a {
padding: 0.125em 0.5985243em;
text-decoration: none;
/* no underline */
background-color: #55FA99;
/* dark green */
border: 2px solid black;
border-top-left-radius: 1em 1em;
/* rounded corner! */
border-top-right-radius: 1em 1em;
/* another rounded corner! */
}
nav ul li a:hover,
nav ul li a:focus {
color: #014C65;
background-color: #006E5F;
/*medium green*/
font-weight: bold;
}
.nav_menu {
border: 0;
}
マイHTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="Style.css" media="screen">
<link rel="icon" href="Images/favicon-16x16.png" type="image/png">
<title>Web Portfolio: Patrick White's Index Page</title>
</head>
<body>
<div class="box" id="skipnav">
<a href="#main">Skip to main content</a>
</div>
<h1>Patrick White Web Portfolio</h1>
<div class="info">
<ul>
<li>Patrick White</li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li>843-653-3474</li>
<li>link to one of my favourite <a href="http://eelslap.com/" target="_blank">websites</a></li>
<li>If you like goats, download my presentation! In either: <a href="Images/GOATS.pdf" download>PDF</a>, <a href="Images/GOATS_VIDEO.wmv" download>Video</a>, <a href="Images/GOATS.odp">Open Office</a> or <a href="Images/GOATS.ppt">Microsoft Powerpoint</a></li>
</ul>
</div>
<div class="info">
<ul>
<li>I.T. 9 (1-2)</li>
<li>Mr. Gabriel Jones</li>
<li>Web Design</li>
<li><a href="http://go.vsb.bc.ca/schools/pointgrey/Pages/Default.aspx" target="_blank">Point Grey Secondary</a>, 2016-2017</li>
</ul>
</div>
<div class="nav_menu">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Accesibility.html">Accessibility</a></li>
<li><a href="Usability.html">Usability</a></li>
<li><a href="Graphics.html">Graphics</a></li>
<li><a href="JavaScript.html">JavaScript</a></li>
<li><a href="Tools.html">Tools</a></li>
<li><a href="Video.html">Video</a></li>
<li><a href="Games.html">Games</a></li>
</ul>
</nav>
</div>
<div>
<main id="main">
<p id="overview">This web portfolio includes examples of my works in Mr. Jones' Web Design class. It also includes my reflections (below) in what I learned with each unit of the course.</p>
<h2>Unit 2</h2>
<p>In this section, I learned the basics of a fundamental scripting language for website design; <i>HTML5</i>. I learned about some of the many tags that are useful in the design of websites that will assist me in my prospective career in web design.
In this unit I was presented with many resources to ensure that my HTML code was formatted correctly and was error-free, in the form of online generators. We also learned a great deal about how to incorporate links and images into our file, of which
I found particularly interesting. In this section we learned a lot about how to input the actual content of our websites, and I am very excited for the future units in which we get to further design this content to seem visually appealing.</p>
<h2>Unit 3</h2>
<p class="temp">This section will be completed soon</p>
<h2>Unit 4</h2>
<p class="temp">This section will be completed soon</p>
<h2>Unit 5</h2>
<p class="temp">This section will be completed soon</p>
<h2>Unit 6</h2>
<p class="temp">This section will be completed soon</p>
<h2>Unit 7</h2>
<p class="temp">This section will be completed soon</p>
</main>
</div>
<a href="http://www.coolmath-games.com/0-me-and-the-key" target="blank" class="gamebutton">Click to Play One of My Favourite Games!</a>
<!--Game Button-->
</body>
</html>
あなたは '余裕を与えるしようとした人：0自動;'あなた ''