堆栈内存溢出
  简体   繁体   English

如何缩小超链接的宽度大小？

[英]How to shrink the width size hyperlink?

 原文  2015-07-10 23:26:43  2   2    html/ css/ hyperlink/ block

问题描述

I'm pretty fresh to html/css programming, so please forgive me for if this is a rookie mistake. 我对html / css编程非常了解，所以如果这是菜鸟错误，请原谅我。

I've started a new webpage - http://robingham.co.uk/LUUCC4/index.php 我已经开始了一个新网页-http: //robingham.co.uk/LUUCC4/index.php

I've decided to attempt to get the fixed navigation and menu bar sorted out first. 我决定尝试首先整理出固定的导航和菜单栏。

I want the menu button and the logo for the site to be within the fixed navigation bar. 我希望网站的菜单按钮和徽标位于固定的导航栏中。 As you can see, i've pretty much sorted it out. 如您所见，我已经对其进行了整理。 There are a few minor things i need to do, like align the menu button. 我需要做一些小事情，例如对齐菜单按钮。 But functionality it seems to be working fine. 但是功能似乎运行良好。

The issue that i'm attempting to fix at the moment is that the logo has a screen width sized hyperlink area. 我目前正在尝试解决的问题是徽标具有屏幕宽度大小的超链接区域。 I've added a hyperlink to the logo so that users can go back to the home page by clicking it. 我在徽标上添加了超链接，以便用户可以通过单击它返回主页。 I also want the logo to be horizontally centre regardless of the size of the screen. 我也希望徽标无论屏幕大小如何都水平居中。 I believe the issue has something to do with the fact that i had to use display: block; 我认为这个问题与我不得不使用display: block;的事实有关display: block; to get the horizontal centre alignment to work but i'm not sure how to fix the hyperlink. 为了使水平中心对齐工作，但我不确定如何修复超链接。

How do i fix it please? 我该如何解决？

Thanks 谢谢

My index.php is. 我的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>

My CSS code is. 我的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;
}

2 个解决方案

解决方案1
 2 已采纳  2015-07-10 23:41:35

 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>

解决方案2
 0  2015-07-10 23:48:32

Nest the link and the logo, like so: 嵌套链接和徽标，如下所示： 

<a>
    <img src="this_is_my_logo.png" />
</a>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何固定页面宽度以缩小到屏幕尺寸？ - How can I fix the page width to shrink to the screen size? 如何根据列的大小缩小行宽 - Bootstrap - How to shrink down row width depending on the size of the columns - Bootstrap 如果未定义外部div大小的宽度和高度，如何使用CSS缩小图片大小？ - How to shrink image size with CSS if its outer div size width and height is undefined? 当容器是超链接时，Flex图像不会随屏幕尺寸缩小 - Flex image won't shrink with screen size when container is a hyperlink 如何在视口宽度减小的情况下将 a 从最大高度缩小到最小高度？ - How to shrink a from a max-height to a min-height over the size decrease of the viewport width? 如何缩小div / section的大小？ - How to shrink the size of a div / section? 如何将桌子缩小到手机大小 - How to shrink a table to the size of a phone CSS将容器缩小到两个动态宽度div的大小 - CSS shrink container to size of two dynamic width divs 如何缩小括号中数字的字体大小？ - How to shrink the font size of numbers in parentheses? 加载时如何缩小图像大小 - How to shrink the size of an image when loading it in
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM