I just started developing my first web page after learning HTML and CSS and I don't have much understanding yet.
The issue is, as mentioned, problem with centering. I have specified CSS property text-align: cetner; but that has no result.
Another thing I couldn't achieve is to expand link clickable area to whole button. I mean, wherever you click on a button, the browser should go to the URL from the link, I tried specifying width: 100%; with no success.
Below is my code:
li.hMenu {
display: inline;
background: red;
width: 33.33%; /*for the older browsers fallback */
width: calc(100% / 3);
float: left;
}
li.hMenu:hover{
background-color: darkred;
}
li.hMenu:active{
position: relative;
left: 1px;
top: 1px;
background-color: darkred;
}
#menu {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CommonLayout.css" />
<script src="ProjectPage.js"></script>
</head>
<body>
<ul id="menu">
<li style="z-index: 10" class="hMenu">
<a href="ProjectPage.html">Main Page</a>
</li>
<li style="z-index: 9" class="hMenu">
<a href="About.html">About</a>
</li>
<li style="z-index: 8" class="hMenu">
<a href="Calculator.html">Calculator</a>
</li>
</ul>
<p>This is <em>Main Page</em> page.</p>
</body>
</html>答案 0 :(得分：1)
只需将您的锚元素的显示属性更改为阻止：
li a {
display: block;
这样它将占据包含框宽度的100％，并且text-align属性将生效。
li.hMenu {
display: inline;
background: red;
width: 33.33%; /*for the older browsers fallback */
width: calc(100% / 3);
float: left;
}
li.hMenu:hover{
background-color: darkred;
}
li.hMenu:active{
position: relative;
left: 1px;
top: 1px;
background-color: darkred;
}
#menu {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CommonLayout.css" />
<script src="ProjectPage.js"></script>
</head>
<body>
<ul id="menu">
<li style="z-index: 10" class="hMenu">
<a href="ProjectPage.html">Main Page</a>
</li>
<li style="z-index: 9" class="hMenu">
<a href="About.html">About</a>
</li>
<li style="z-index: 8" class="hMenu">
<a href="Calculator.html">Calculator</a>
</li>
</ul>
<p>This is <em>Main Page</em> page.</p>
</body>
</html>
答案 1 :(得分：0)
您必须更改此代码块：
li.hMenu {
text-align: center;
display: inline;
background: red;
width: 33.33%;
width: calc(100% / 3);
float: left; }