화면의 다른 쪽까지 연결되는 링크

-2

링크가 div에서 화면의 다른 쪽까지 확장됩니다. 그 크기를 제한하기 위해 링크에 클래스를 넣으려고했지만 분명히 작동하지 않았습니다. 나는 또한 래퍼 크기 제한을 시도했다. 그것은 또한 일을하지 못했습니다. 왜 이런 일이 일어나는 지 아는 사람이 있습니까?화면의 다른 쪽까지 연결되는 링크

<head> 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<style> 
.image { 
height: 40px; 
width: 50px; 
} 
.b { 
background-color: #E5DF00; 
width: 60px; 
padding: 15px 15px 12px 20px; 
font-size: 50px; 
color: white; 
} 
.fb { 
background-color: #2B65B2; 
} 
.fb:hover{ 
background-color: #2C5489 !important; 
} 
.b:hover { 
    background-color: #DAD400; 
} 
.code { 
    width: 50em; 
    background-color: #ECECEC; 
    padding: 5px; 
    border: 0; 
    height: 315px; 
} 
html, body { 
margin: 0px; 
} 
.tw { 
background-color: #4B98FF; 
} 
.tw:hover { 
background-color: #398EFF; 
} 
sWrapper { 
width: 60px; 
position: relative; 
} 
#open { display: none; } 
</style> 
</head> 
<body> 
<br /> 
<div class="sWrapper" id="buttons"> 
<font style="font-family: 'Roboto', sans-serif;"> See us on </font> 
<a href="https://www.minds.com/*"> 
<div class="b"> 
<img src="https://s11.postimg.org/ek580pzqr/test.png" class="image"> 
</div> 

<a href="https://www.facebook.com/*"> 
<div class="b fb" > 
<center> 
<i class="fa fa-facebook" aria-hidden="true"></i> 
</center> 
</div> 
</a> 
<a href="https://www.twitter.com/*"> 
<div class="b tw"> 
<center> 
<i class="fa fa-twitter" aria-hidden="true"></i> 
</center> 
</div> 
</a> 
</div>

편집 : 인라인을 원하지 않는다. 오른쪽의 공백을 클릭하면 링크가 계속 작동합니다.

출처

2016-11-17 One SNapp

DIV를 넣기 때문에. DIV는 블록 요소이며 기본적으로 width이 100 %이므로 부모 요소의 전체 너비에 걸쳐 있습니다.

출처

2016-11-17 00:33:58 Johannes

내가이 어떻게 피할 수 있는가? –

DIV 대신'span' 태그를 사용할 수 있습니다 - 범위는 기본적으로 인라인입니다. – Johannes

코드가 깨졌습니다. –

원하는 것이 맞습니까?

a { 
 
    display: inline-block; 
 
    width: 105px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
}

<a href="#">Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Long text</a>

출처

2016-11-17 00:41:40

아니요. –

문제의 예 : https://drive.google.com/file/d/0BzmacKNa7tvrdGdscmRHc0gwX2c/view?usp=sharing –

너비가 작동하려면'.b {display : inline-block} '을 사용하십시오. 모든 요소에 동일하게 적용됩니다. ''inline-block '이어야합니다. –

화면의 다른 쪽까지 연결되는 링크

답변

관련 문제