将锚标签大小设置为其div内容？

下面是一个测试文件，test.htm，这与这导致在Firefox：将锚标签大小设置为其div内容？

的<div>为绿色，带黄色边框和指定大小，以及<a>与红色边框。显然，锚标签具有更大的宽度和高度，它包含的div。我怎样才能使锚标签大小等于其div内容 - 但是，以这种方式，<div>的大小和位置不变？基本上，对于该示例和示出的浏览器窗口大小，我想这个（手动编辑的PIC）：

test.htm：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <style type="text/css"> 
body { 
    padding:0; 
    margin:0; 
    width: 100%; 
    height: 100%; 
    background-color: white; 
    color: darkred; 
} 
div#button { 
    margin-top: 2vh; 
    padding: 2em; 
    width: 20em; 
    border-style: solid; 
    border-width: 2px; 
    border-color: yellow; 
    background-color: lightgreen; 
    text-align: center; 
    font-size: 3vh; 
    /* to center div horizontally: */ 
    margin-left: auto; 
    margin-right: auto; 
} 
a { 
    text-decoration: none; /*remove underline of a href link:*/ 
    display: block; 
    width: auto; 
    padding: 0; 
    margin: 0; 
    color: unset; 
    border-style: solid; 
    border-width: 2px; 
    border-color: red; 
} 
    </style> 
</head> 

<body> 
<br/> 
<a href="test.zip" target="_blank"><div id="button">Download this</div></a> 
</body> 
</html>

来源

2016-08-31 sdaau

取决于它是如何被使用的，你可以将它设置为'显示。 –

将a从display: block;更改为display: inline-block;。
为了获得完全相同的高度，请删除div的margin-top。

为了保持居中，将text-align:center添加到父元素，在您的情况下您的body。注意：以这种方式，身体内的一切都将居中。
如果您只希望您的a -tag居中，请在其周围添加包装div并添加text-align:center。而不是``显示; inline-block的：块;`

Codepen例如：
http://codepen.io/anon/pen/jrNvzx

来源

2016-08-31 11:35:59

非常感谢@MichaelSchmidt;然而，这扰乱了div的水平居中（使用margin-left/right auto完成）;我用我想得到的结果澄清了OP。对此有何建议？ – sdaau

@sdaau：将'text-align：center;'添加到你的'body'。请注意，正文内的所有内容都将居中。或者在HTML和HTML中添加一个包装。我更新了codepen demo –

谢谢，@MichaelSchmidt - 看起来像包装技术是我需要的..干杯！ – sdaau

尝试这种情况：

<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
    <style type="text/css"> 
 
body { 
 
    padding:0; 
 
    margin:0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: white; 
 
    color: darkred; 
 
} 
 
div#button { 
 
    padding: 2em; 
 
    width: 20em; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: yellow; 
 
    background-color: lightgreen; 
 
    text-align: center; 
 
    font-size: 3vh; 
 
    /* to center div horizontally: */ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
a { 
 
    text-decoration: none; /*remove underline of a href link:*/ 
 
    display:inline-block; 
 
    width: auto; 
 
    padding: 0; 
 
    margin: 0; 
 
    color: unset; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: red; 
 
} 
 
    </style> 
 
</head> 
 

 
<body> 
 
<br/> 
 
<a href="test.zip" target="_blank"><div id="button">Download this</div></a> 
 
</body> 
 
</html>

来源

2016-08-31 11:28:54

谢谢@ AbhishekPandey，但是这和@MichaelSchmidt一样 - 和那里一样，水平居中不被保留，这是我想要的。对此有何建议？ – sdaau

将锚标签大小设置为其div内容？

回答

相关问题