用css写一个适配手机浏览的导航栏，宽度自适应，高度40px,里面两个文字，一个居中对齐，一个靠右对齐

可以使用以下代码实现：

.nav {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding:  10px;
}

.nav__left {
  text-align: center;
  flex-grow: 1;
}

.nav__right {
  text-align: right;
  width: 80px;
}

HTML 代码：

<div class="nav">
  <div class="nav__left">居中对齐</div>
  <div class="nav__right">靠右对齐</div>
</div>

这个导航栏会自适应手机浏览器的宽度，左侧文字居中对齐，右侧文字靠右对齐。

相关问题

用css写一个适配手机浏览的导航栏，宽度自适应，高度40px,里面两个模块一个居中，一个靠右对齐。

可以使用以下 CSS 代码实现：

.nav {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}

.nav .logo {
flex: 1;
text-align: center;
}

.nav .menu {
width: 100px;
text-align: right;
}

其中，.nav 是导航栏的容器，使用 flex 布局实现居中对齐和自适应宽度。.logo 和 .menu 分别是左侧和右侧的模块，使用 flex 属性实现自适应宽度和居中/右对齐。