我可以设置href的宽度和高度100％

-2

我想创建一个背景图像和文本在100％宽度和高度属性的中心的菜单。我可以设置href的宽度和高度100％

我有这样的代码：

<div id="wrapper"> 
    <div id="container"> 
      <div><a class="aMenuHref" href="#">My Link</a></div> 
    </div> 
</div> 

.aMenuHref{ 
    font-size: large; 
    height: 35px; 
    display: inline-block; 
    width: 100%; 
} 

#container { 
    width: 100%; 
    height: 35px; 
    position: relative; 
    background: url(images/back1.jpg) no-repeat 0 0px; 
    } 
    #wrapper > #container { 
    display: table; 
    position: static; 
    } 
    #container div { 
    position: absolute; 
    top: 50%; 
    } 
    #container div div { 
    position: relative; 
    top: -50%; 
    } 
    #container > div { 
    display: table-cell; 
    vertical-align: middle; 
    position: static; 
    } 
#container:hover{ 
    background: orange; 
}

但我的HREF还没有width: 100%和height: 100%。

谢谢！

来源

2013-10-19 user2700126

由于<body>，您的<a>没有宽度和高度100％。

您可以将身体复位：

body { 
    margin: 0; 
    padding: 0; 
}

然后你就可以实现高度100％的：

html, body, #wrapper, #container, #container div, .aMenuHref { 
    height: 100%; 
}

中心的文字水平：

.aMenuHref { 
    text-align: center; 
}

和垂直：

.aMenuHref { 
    position: absolute; 
    top: 50%; 
}

最后的代码如下所示：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 

<style> 
body { 
    margin:0; 
    padding:0; 
} 

html, body, #wrapper, #container, #container div, .aMenuHref { 
    height: 100%; 
} 

.aMenuHref{ 
    font-size: large; 
    height: 35px; 
    display: inline-block; 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    top: 50%; 
} 

#container { 
    width: 100%; 
    height: 35px; 
    position: relative; 
    background: url(images/back1.jpg) no-repeat 0 0px; 
} 

#container:hover{ 
    background: orange; 
}  

</style> 

<div id="wrapper"> 
    <div id="container"> 
      <div><a class="aMenuHref" href="#">My Link</a></div> 
    </div> 
</div> 

</body> 
</html>

来源

2013-10-19 11:12:49 Simone

谢谢！你的回答对我有用！ – user2700126

不客气！请考虑通过点击勾号来接受我的答案:) – Simone

我可以设置href的宽度和高度100％

回答

相关问题