在网页设计中，经常需要将某些元素水平左右靠边。比如导航栏、图片等元素。下面我们就来介绍如何使用CSS设置横向左右靠边。

首先，我们需要给需要设置的元素添加CSS样式。比如：

<div class="container">
<nav class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品分类</a></li>
<li><a href="#">新闻资讯</a></li>
</ul>
</nav>
</div>

.container {
max-width: 1200px;
margin: 0 auto;
}
.menu {
padding: 0;
margin: 0;
text-align: center;
}
ul {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 0;
padding: 0;
}
a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: #333;
background-color: #fff;
}

以上是一个简单的导航栏的HTML代码以及CSS样式。

接下来，我们要实现导航栏横向左右靠边的效果。可以通过以下两种方式实现。

方式一：使用text-align属性

.container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.menu {
display: inline-block;
padding: 0;
margin: 0;
text-align: left;
}

通过在父元素中添加text-align: center，然后在导航栏中添加text-align: left，就可以实现导航栏横向左右靠边的效果。这种方式适用于需要居中显示父元素的情况。

方式二：使用position属性

.menu {
position: absolute;
left: 0;
right: 0;
}

通过在导航栏中添加position: absolute; left: 0; right: 0;，就可以实现导航栏横向左右靠边的效果。这种方式适用于不需要居中显示父元素的情况。

以上就是使用CSS设置横向左右靠边的方法，根据实际情况选择合适的方式即可。