如何缩小超链接的宽度大小？
How to shrink the width size hyperlink?
我对 html/css 编程还很陌生，所以如果这是一个菜鸟错误，请原谅我。
我开始了一个新网页 - http://robingham.co.uk/LUUCC4/index.php
我决定先尝试解决固定的导航和菜单栏。
我希望站点的菜单按钮和徽标位于固定导航栏内。如您所见，我已经把它整理得差不多了。我需要做一些小事，比如对齐菜单按钮。但功能似乎运行良好。
我目前试图解决的问题是徽标有一个屏幕宽度大小的超链接区域。我在徽标上添加了一个超链接，以便用户可以通过单击它返回到主页。无论屏幕大小如何，我还希望徽标水平居中。我认为这个问题与我必须使用 display: block; 来使水平居中对齐正常工作有关，但我不确定如何修复超链接。
请问我该如何解决？
谢谢
我的 index.php 是。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" type="image/ico" href="http://www.robingham.co.uk/LUUCC3/media/favicon.ico">
<link type="text/css" rel="stylesheet" href="http://www.robingham.co.uk/LUUCC3/styles/general_formatting.css"/>
<title>LUUCC-Build</title>
<meta charset="UTF-8" />
<script src="http://www.robingham.co.uk/LUUCC3/scripts/jquery-1.11.3.min.js"></script>
<script src="http://www.robingham.co.uk/LUUCC3/scripts/menu_function.js"></script>
</head>
<body>
<div id="header_bar">
<img class="icon-menu" src="media/menu.png" width="40" height="40" alt="Menu button"/>
<!--<a href="http://www.robingham.co.uk"><img id="header_bar_menu" src="media/menu.png" width="40" height="40" alt="Menu button"/></a>-->
<div><a href="http://www.robingham.co.uk/LUUCC/index.php"><img id="header_bar_logo" src="media/header_bar_logo.png" width="315" height="65" alt="LUUCC logo"/></a></div>
</div>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://www.robingham.co.uk/LUUCC3/media/close.png">
</div>
<!-- Menu -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div id="body_material">
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<p>test5</p>
<p>test6</p>
<p>test7</p>
<p>test8</p>
<p>test9</p>
<p>test10</p>
<p>test221</p> <!--Removed some of these for the sake of the post-->
<p>test221</p>
<p>test221</p>
<p>test221</p>
<p>test221</p>
</div>
</body>
</html>
我的 CSS 代码是。
body {
background-color: #00FFF0; /*#f6f6f6*/
}
#header_bar {
z-index: 1;
position: fixed;
width: 100%;
top: -1px;
left: -1px;
height: 65px; /**/
background-color: #FFFFFF; /*FFFFFF*/
border:1px solid #ccc;
}
#header_bar_menu{
display: inline-block;
/*vertical-align: 9px;
margin-left: 10px;*/
border:4px solid #000000;
margin-left: 15px;
margin-top: 15px;
}
#header_bar_logo {
/*display: inline-block;
margin-left: 500px;*/
/*display: inline-block;
text-align:center;*/
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -95px; /*-60*/
}
.menu {
background: #202024;
left: -285px; /* start off behind the scenes */
top: 65px;
height: 100%;
position: fixed;
width: 285px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
/**/
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
body {
background-color: #f6f6f6; /*#f6f6f6*/
}
#header_bar {
z-index: 1;
position: fixed;
width: 100%;
top: -1px;
left: -1px;
height: 65px;/**/
background-color: #FFF;/*FFFFFF*/
border:1px solid #ccc;
text-align: center;
}
#header_bar_menu{
display: inline-block;
/*vertical-align: 9px;
margin-left: 10px;*/
border:4px solid #000000;
margin-left: 15px;
margin-top: 15px;
}
#header_bar_logo {
/*display: inline-block;
margin-left: 500px;*/
/*display: inline-block;
text-align:center;*/
/* display: block; */
/* margin-left: auto; */
/* margin-right: auto; */
/* margin-top: -95px; *//*-60*/
}
.menu {
background: #202024; /* url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;*/
left: -285px; /* start off behind the scenes */
top: 65px;
height: 100%;
position: fixed;
width: 285px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
/**/
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans',
sans-serif;
font-size: 16px;
/* padding-bottom: 25px; */
/* padding-left: 25px; */
/* padding-top: 25px; */
text-decoration: none;
text-transform: uppercase;
position: absolute;
left: 1rem;
top: 1rem;
}
.icon-menu i {
margin-right: 5px;
}
<base href="http://robingham.co.uk/LUUCC4/index.php"/>
<div id="header_bar">
<img class="icon-menu" src="media/menu.png" width="40" height="40" alt="Menu button"/>
<!--<a href="http://www.robingham.co.uk"><img id="header_bar_menu" src="media/menu.png" width="40" height="40" alt="Menu button"/></a>-->
<a href="http://www.robingham.co.uk/LUUCC4/index.php"><img id="header_bar_logo" src="media/header_bar_logo.png" width="315" height="65" alt="LUUCC logo"/></a>
</div>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://www.robingham.co.uk/LUUCC4/media/close.png">
</div>
<!-- Menu -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div id="body_material">
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<p>test5</p>
</div>
嵌套 link 和徽标，如下所示：
<a>
<img src="this_is_my_logo.png" />
</a>
我对 html/css 编程还很陌生，所以如果这是一个菜鸟错误，请原谅我。
我开始了一个新网页 - http://robingham.co.uk/LUUCC4/index.php
我决定先尝试解决固定的导航和菜单栏。
我希望站点的菜单按钮和徽标位于固定导航栏内。如您所见，我已经把它整理得差不多了。我需要做一些小事，比如对齐菜单按钮。但功能似乎运行良好。
我目前试图解决的问题是徽标有一个屏幕宽度大小的超链接区域。我在徽标上添加了一个超链接，以便用户可以通过单击它返回到主页。无论屏幕大小如何，我还希望徽标水平居中。我认为这个问题与我必须使用 display: block; 来使水平居中对齐正常工作有关，但我不确定如何修复超链接。
请问我该如何解决？
谢谢
我的 index.php 是。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" type="image/ico" href="http://www.robingham.co.uk/LUUCC3/media/favicon.ico">
<link type="text/css" rel="stylesheet" href="http://www.robingham.co.uk/LUUCC3/styles/general_formatting.css"/>
<title>LUUCC-Build</title>
<meta charset="UTF-8" />
<script src="http://www.robingham.co.uk/LUUCC3/scripts/jquery-1.11.3.min.js"></script>
<script src="http://www.robingham.co.uk/LUUCC3/scripts/menu_function.js"></script>
</head>
<body>
<div id="header_bar">
<img class="icon-menu" src="media/menu.png" width="40" height="40" alt="Menu button"/>
<!--<a href="http://www.robingham.co.uk"><img id="header_bar_menu" src="media/menu.png" width="40" height="40" alt="Menu button"/></a>-->
<div><a href="http://www.robingham.co.uk/LUUCC/index.php"><img id="header_bar_logo" src="media/header_bar_logo.png" width="315" height="65" alt="LUUCC logo"/></a></div>
</div>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://www.robingham.co.uk/LUUCC3/media/close.png">
</div>
<!-- Menu -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div id="body_material">
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<p>test5</p>
<p>test6</p>
<p>test7</p>
<p>test8</p>
<p>test9</p>
<p>test10</p>
<p>test221</p> <!--Removed some of these for the sake of the post-->
<p>test221</p>
<p>test221</p>
<p>test221</p>
<p>test221</p>
</div>
</body>
</html>
我的 CSS 代码是。
body {
background-color: #00FFF0; /*#f6f6f6*/
}
#header_bar {
z-index: 1;
position: fixed;
width: 100%;
top: -1px;
left: -1px;
height: 65px; /**/
background-color: #FFFFFF; /*FFFFFF*/
border:1px solid #ccc;
}
#header_bar_menu{
display: inline-block;
/*vertical-align: 9px;
margin-left: 10px;*/
border:4px solid #000000;
margin-left: 15px;
margin-top: 15px;
}
#header_bar_logo {
/*display: inline-block;
margin-left: 500px;*/
/*display: inline-block;
text-align:center;*/
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -95px; /*-60*/
}
.menu {
background: #202024;
left: -285px; /* start off behind the scenes */
top: 65px;
height: 100%;
position: fixed;
width: 285px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
/**/
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
body {
background-color: #f6f6f6; /*#f6f6f6*/
}
#header_bar {
z-index: 1;
position: fixed;
width: 100%;
top: -1px;
left: -1px;
height: 65px;/**/
background-color: #FFF;/*FFFFFF*/
border:1px solid #ccc;
text-align: center;
}
#header_bar_menu{
display: inline-block;
/*vertical-align: 9px;
margin-left: 10px;*/
border:4px solid #000000;
margin-left: 15px;
margin-top: 15px;
}
#header_bar_logo {
/*display: inline-block;
margin-left: 500px;*/
/*display: inline-block;
text-align:center;*/
/* display: block; */
/* margin-left: auto; */
/* margin-right: auto; */
/* margin-top: -95px; *//*-60*/
}
.menu {
background: #202024; /* url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;*/
left: -285px; /* start off behind the scenes */
top: 65px;
height: 100%;
position: fixed;
width: 285px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
/**/
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans',
sans-serif;
font-size: 16px;
/* padding-bottom: 25px; */
/* padding-left: 25px; */
/* padding-top: 25px; */
text-decoration: none;
text-transform: uppercase;
position: absolute;
left: 1rem;
top: 1rem;
}
.icon-menu i {
margin-right: 5px;
}
<base href="http://robingham.co.uk/LUUCC4/index.php"/>
<div id="header_bar">
<img class="icon-menu" src="media/menu.png" width="40" height="40" alt="Menu button"/>
<!--<a href="http://www.robingham.co.uk"><img id="header_bar_menu" src="media/menu.png" width="40" height="40" alt="Menu button"/></a>-->
<a href="http://www.robingham.co.uk/LUUCC4/index.php"><img id="header_bar_logo" src="media/header_bar_logo.png" width="315" height="65" alt="LUUCC logo"/></a>
</div>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://www.robingham.co.uk/LUUCC4/media/close.png">
</div>
<!-- Menu -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div id="body_material">
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<p>test5</p>
</div>
嵌套 link 和徽标，如下所示：
<a>
<img src="this_is_my_logo.png" />
</a>