如何修复不同的浏览器改变我的div宽度？
如何修复不同的浏览器改变我的div宽度？
提问于 2019-12-28 01:59:40
这通常是一个我不需要回答的问题，然而，我感到困惑。我已经试过我能想到的一切了。这张图片在右边有一块灰色的图片。这是滚动条，我想我会把它包括进来。这是在谷歌的Chrome和我想要的。
这就是Microsoft Edge如何做到这一点。
我将问题的范围缩小到我的列表项<li>。在Google Chrome上(根据我的分辨率)，<li>的宽度是226.141px，而在Microsoft Edge上，使用相同的CSS，<li>的宽度是226.35px。
这是我的style.css：
div.menuContainer {
width:100%;
height:48px;
}
ul.menuItems {
/*margin:-12px;*/
}
li.menuItem {
display:inline-block;
box-sizing:border-box;
width:calc(100% / 7);
float:left;
text-align:center;
height:48px;
font-weight:bold;
background-color:#DD4400;
color:#454545;
padding:12px 0;
overflow:hidden !important;
}
li.menuItem:hover {
background-color:#454545;
color:#DD4400;
}
li.menuItem a {
color:#454545;
}
li.menuItem a:hover {
color:#DD4400;
}这是我的菜单：
<div class="menuContainer">
<ul class="menuItems">
<a href="/videos.php">
<li class="menuItem">
Videos
</li>
</a>
<a href="/playlists.php">
<li class="menuItem">
Playlists
</li>
</a>
<a href="/categories.php">
<li class="menuItem">
Categories
</li>
</a>
<a href="/actors.php">
<li class="menuItem">
Actors
</li>
</a>
<a href="/photos.php">
<li class="menuItem">
Photos
</li>
</a>
<?php if($logged_in == 0) { ?>
<a href="/login.php">
<li class="menuItem">
Login
</li>
</a>
<a href="/register.php">
<li class="menuItem">
Register
</li>
</a>
<?php }
else { ?>
<a href="/logout.php">
<li class="menuItem">
Logout
</li>
</a>
<a href="/account.php">
<li class="menuItem">
My Account
</li>
</a>
<?php }
?>
</ul>
</div>如果您能提供任何帮助，我们将不胜感激。谢谢。
Stack Overflow用户
回答已采纳
发布于 2019-12-28 03:04:07
这里是使用flexbox解决相同问题的另一种方法。我还对您的HTML做了一些细微的修改。这种方法的关键是在容器上使用display: flex，在该容器的子容器上使用flex-grow: 1。注意:我还使用display: flex在<a>元素上实现垂直和水平居中，而不是使用顶部和底部填充。
.menu {
height: 48px;
display: flex;
}
.menu a {
flex-grow: 1;
display: flex;
font-weight: bold;
background-color: #DD4400;
color: #454545;
align-items: center;
justify-content: center;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
}<div class="menu">
<a href="/videos.php">Videos</a>
<a href="/playlists.php">Playlists</a>
<a href="/categories.php">Categories</a>
<a href="/actors.php">Actors</a>
<a href="/photos.php">Photos</a>
<a href="/logout.php">Logout</a>
<a href="/account.php">My Account</a>
</div>
这里有一篇简短的文章，解释了flexbox可以为你做什么-- css-tricks.com/snippets/css/a-guide-to-flexbox。我强烈建议您将此工具添加到您的工具包中-它相对较新，但具有非常好的浏览器支持caniuse.com/#feat=flexbox。我经常使用它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59504412
复制相关文章
相似问题
腾讯云开发者
