由于某种原因,链接从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>
编辑:我不希望他们内联。如果我点击它们右侧的空白区域,链接仍然有效。
答案 0 :(得分:3)
因为你把DIV放进去了。 DIV是块元素,默认情况下为width
100%,从而跨越父元素的整个宽度。
答案 1 :(得分:0)
这就是你想要的吗?
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>