앵커 태그 크기를 div 콘텐츠로 만드시겠습니까?

다음은 파이어 폭스에두고 결과 테스트 파일, test.htm입니다 :앵커 태그 크기를 div 콘텐츠로 만드시겠습니까?

<div> 노란색 테두리와 지정된 크기 녹색, 그리고 <a> 빨간색 테두리입니다. 분명히 앵커 태그에는 포함 된 div보다 큰 너비와 높이가 있습니다. 앵커 태그의 크기를 div 콘텐츠의 크기와 같게하려면 어떻게해야합니까? 그러나 <div>의 크기와 위치는 변경되지 않습니다.

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 태그가 가운데에 놓 이도록하려면 래퍼 div를 추가하고 text-align:center을 추가하십시오.

Codepen 예 :
http://codepen.io/anon/pen/jrNvzx

출처

2016-08-31 11:35:59

많은 감사합니다 @MichaelSchmidt; 그러나 div (왼쪽/오른쪽 자동 여백을 사용하여 수행)의 가로 가운데 정렬이 엉망이됩니다. 나는 얻고 싶은 결과로 OP를 분명히했습니다. 그것에 대한 어떤 제안? – sdaau

@sdaau :'body-body'에'text-align : center;'를 추가하십시오. 몸 안의 모든 것이 가운데에 위치하게됩니다. 또는 HTML 및 HTML 주위에 래퍼를 추가하십시오. 나는 codepen 데모를 업데이트했습니다. –

고마워요, @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 콘텐츠로 만드시겠습니까?

답변

관련 문제