如何让<div class="navitems"> <ul> <li><a href="#" class="first">当前</a></li> <li></li> <li><a href="#">春季物产</a></li> <li></li> <li><a href="#">夏季物产</a></li> <li></li> <li><a href="#">秋季物产</a></li> <li></li> <li><a href="#">冬季物产</a></li> </ul> </div>中ul中的文字在横向中距离适中

可以使用CSS中的flex布局来实现ul中的文字在横向中距离适中的效果。具体做法如下：

1. 给包裹ul的父元素.navitems设置display:flex。

2. 在.navitems中设置justify-content:center，使ul元素在水平方向上居中对齐。

3. 在ul元素中设置display:flex和justify-content:space-between，使li元素在水平方向上平均分布。

代码如下：

.navitems {
  display: flex;
  justify-content: center;
}

.navitems ul {
  display: flex;
  justify-content: space-between;
}

这样就可以让ul中的文字在横向中距离适中了。

相关问题

<div class="focus fl"> <a href="#" class="arrow-l"><</a> <a href="#" class="arrow-r"><i></i></a> <ul> <li><a href="#"><img src="upload/focus.jpg"></a></li> </ul> <ol class="circle"> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div>改为bootstr轮播图

可以使用 Bootstrap 中的 Carousel 组件来实现轮播图，将原来的代码改为如下所示：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    <!-- 更多的 li 标签 -->
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="upload/focus.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="upload/focus2.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="upload/focus3.jpg" alt="Third slide">
    </div>
    <!-- 更多的 div 标签 -->
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

需要注意的是，Bootstrap 的 Carousel 组件需要引入相应的 JavaScript 和 CSS 文件。同时，需要根据实际情况修改图片路径和样式。

把这段代码轮播里的箭头加上阴影或者颜色加深 <div class="col-md-6"> <div id="myCarousel" class="carousel slide" data-interval="3000" > <ul class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"><> <li data-target="#myCarousel" data-slide-to="1"><> <li data-target="#myCarousel" data-slide-to="2"><> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/B1.jpg" class="d-block w-100" alt="First slide"> </div> <div class="carousel-item"> <img src="img/B2.png" class="d-block w-100" alt="Second slide"> </div> <div class="carousel-item"> <img src="img/B3.png" class="d-block w-100" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#myCarousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#myCarousel" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div>

你可以通过在CSS文件中为.carousel-control-prev-icon和.carousel-control-next-icon类添加box-shadow属性来为箭头添加阴影，例如：

.carousel-control-prev-icon, .carousel-control-next-icon {
box-shadow: 2px 2px 2px #888888;
}

你也可以通过为这两个类添加background-color属性来加深箭头的颜色，例如：

.carousel-control-prev-icon, .carousel-control-next-icon {
background-color: #333333;
}