当我的第一个内部div具有长链接文本时,我的第二个内部div位置被奇怪地调整。如何解决?
我的HTML代码:
<div class='div-wrapper'>
<div class='inner-div1'>
<a href="#">This is a long link</a>
</div>
<div class='inner-div2'>
<a href="#">Link 2</a>
</div>
</div>
我的css代码:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
链接到div的图片:
答案 0 :(得分:1)
问题在于您的CSS。特别是.div-wrapper div
您需要将显示设置从inline-block
更改为inline-table
才能将其显示在单元格内。你提到你想要在较大的盒子里面放置盒子,但是你需要弄清楚你想要将盒子放在更大的盒子里面的确切位置(例如盒子之间的小间隙,两者都完全适合大盒子的相同尺寸)
答案 1 :(得分:1)
刚刚将inline-block
改为inline-flex
为您的内部div
,看起来很不错。
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
<a href="#">This is a long link</a>
</div>
<div class='inner-div2'>
<a href="#">Link 2</a>
</div>
</div>
答案 2 :(得分:1)
只需解决这个问题,我不认为这里有任何解决方案可以解释问题存在的原因。只是加起来,问题是因为默认情况下 vertical-align设置为基线。
您需要做的是将 vertical-align设置为顶部
将其插入CSS:
.div-wrapper div {
vertical-align: top;
}
答案 3 :(得分:0)
CSS中的小变化
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}