#leftSide
在<nav>
的左端对齐,其他内容居中。但是我希望我的页面尽可能兼容窗口大小调整,所以不想使用margin/padding。
如果可能的话,我也希望能够不添加任何元素来实现这一点。
有人知道如何只使用CSS来实现这个吗?
#leftSide
在<nav>
的左端对齐,其他内容居中。但是,我希望我的页面尽可能兼容窗口调整大小,因此最好不要使用margin / padding。
如果可能的话,我也想尽量避免使用额外的元素来实现这一点。
通过CSS flexbox和定位属性的组合,可以满足所有要求。
首先,向a#gnbii
父容器添加一个ID:
<li class="gnb" id="align-left"> /* NEW - ID added */
<a class="gnb" id="gnbii" href="home.html">
<img id="gnbii" src="../images/instagram icon/1.png" alt="aranpuzzle.ir" height="40px">
<img id="gnbii" src="../images/instagram icon/2.png" alt="aranpuzzle.ir" height="40px">
</a>
</li>
这是CSS代码:
ul {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#align-left {
position: absolute;
left: 2%;
}
演示:https://jsfiddle.net/6pmfc87h/3/
这里是正在发生的事情...
ul
应用了 display: flex
,使其成为一个弹性盒子。每个 li
现在排成一行,这是弹性盒子子元素(称为“flex项目”)的默认行为。
justify-content: center
沿主轴居中子元素。在这种情况下,是水平方向。
align-items: center
沿交叉轴居中子元素。在这种情况下,是垂直方向。
position: relative
为绝对定位建立最近的定位祖先。
position: absolute
将最后一个 li
移动到其最近的定位祖先的左边缘。
如果想了解更多关于flexbox的内容,这里有一份不错的参考资料:Flexbox完全指南
如果想了解更多关于绝对定位的内容,请查看:MDN position
更新(根据评论;适用于较小的屏幕)
我希望它尽可能向右滑动,而不是重叠...
好吧,我们可以在 ul
中添加 white-space: nowrap
,这样导航项目总是保持在一行中。
然后声明一个媒体查询,在较小的屏幕上将所有内容向右移动:
@media only screen and (max-width: 768px) {
ul { justify-content: flex-start; } /* note: site is RTL */
#align-left { position: static; }
}
更新的演示: https://jsfiddle.net/6pmfc87h/4/
......当没有更多空间向右滑动时,我希望浏览器不再让用户调整窗口的宽度!
你确定这是你想要做的吗?有一些 JavaScript 方法可以设置浏览器窗口大小,但我不确定它们在所有浏览器上都完全可靠。更重要的是,我认为这不符合最佳实践。在我看来,用户应该被允许根据浏览器本身允许的程度自由调整浏览器窗口大小。[了解更多.]
你最好将重点放在作为网页开发者拥有更多控制的领域上。你可以设置一个min-width
声明,告诉浏览器你的元素不能再变窄了。或者你可以使用媒体查询来调整屏幕大小以适应较小的屏幕。nav li#leftSide { text-align:left; }
- dacastro4#leftSide{
float:left;
}
但是,如果我是你,我会为左边的图片添加一些像素的 margin-left,这样它就不会在边缘了。
不幸的是,我的解决方案会稍微破坏你的垂直对齐!
#leftSide
,然后再谈论它。但是感谢您的回车!我不知道如何输入!奇怪的是,您需要输入两次才能实现一行断开! - yukashima huksaybr
标签在问题中创建换行。 - Michael Benjamin