画面の他の側に伸びるリンク

-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} 'を使用してください。同じ要素に適用されます。それは 'インラインブロック'でなければなりません。 –

画面の他の側に伸びるリンク

答えて

関連する問題