堆棧內存溢出
  簡體   English   中英

如何縮小超鏈接的寬度大小？

[英]How to shrink the width size hyperlink?

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

問題描述

我對html / css編程非常了解，所以如果這是菜鳥錯誤，請原諒我。

我已經開始了一個新網頁-http: //robingham.co.uk/LUUCC4/index.php

我決定嘗試首先整理出固定的導航和菜單欄。

我希望網站的菜單按鈕和徽標位於固定的導航欄中。 如您所見，我已經對其進行了整理。 我需要做一些小事情，例如對齊菜單按鈕。 但是功能似乎運行良好。

我目前正在嘗試解決的問題是徽標具有屏幕寬度大小的超鏈接區域。 我在徽標上添加了超鏈接，以便用戶可以通過單擊它返回主頁。 我也希望徽標無論屏幕大小如何都水平居中。 我認為這個問題與我不得不使用display: block;的事實有關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;
}

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

嵌套鏈接和徽標，如下所示： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何固定頁面寬度以縮小到屏幕尺寸？ 如何根據列的大小縮小行寬 - Bootstrap 如果未定義外部div大小的寬度和高度，如何使用CSS縮小圖片大小？ 當容器是超鏈接時，Flex圖像不會隨屏幕尺寸縮小 如何在視口寬度減小的情況下將 a 從最大高度縮小到最小高度？ 如何縮小div / section的大小？ 如何將桌子縮小到手機大小 CSS將容器縮小到兩個動態寬度div的大小 如何縮小括號中數字的字體大小？ 加載時如何縮小圖像大小
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM