我有六个单独的选项。我希望黑色边框在单击任何选项时都能平滑地左右滑动。当我点击"服务提供商"时，黑色底部边框必须向右平滑滑动。当我点击"朋友"时，它应该会平滑地向左滑动。我想通过CSS转换来实现这一点。当我单击右侧的选项时，它运行良好，但左侧的转换不起作用。
.row {
background-color: #f4f4f4;
border-bottom: 1px solid #dbdbdb;
text-align: center;
border-right: 1px solid #dbdbdb;
margin: 0px;
}
span {
position: relative;
left: 0;
bottom: 0;
width: 16.33%;
border-bottom: 2px black solid;
transition: all .5s;
}
#friendBox:checked~span {
left: 0%;
}
#sellerBox:checked~span {
left: 16.33%;
}
#familyBox:checked~span {
left: 33.33%;
}
#clientsBox:checked~span {
left: 50%;
}
#childrenBox:checked~span {
left: 67%;
}
#elderBox:checked~span {
left: 83.75%;
}
input[type="radio"] {
position: absolute;
left: -100vw;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<input type="radio" id="friendBox"></input>
<input type="radio" id="sellerBox"></input>
<input type="radio" id="familyBox"></input>
<input type="radio" id="clientsBox"></input>
<input type="radio" id="childrenBox"></input>
<input type="radio" id="elderBox"></input>
<div class="col-sm-2">
<label for="friendBox">Friends</label>
</div>
<div class="col-sm-2">
<label for="sellerBox">Service Providers</label>
</div>
<div class="col-sm-2">
<label for="familyBox">Family</label>
</div>
<div class="col-sm-2">
<label for="clientsBox">Clients</label>
</div>
<div class="col-sm-2">
<label for="childrenBox">Children</label>
</div>
<div class="col-sm-2">
<label for="elderBox">Elders</label>
</div>
<span></span>
</div>
</div>
</body>
</html>您没有正确使用单选按钮。单选按钮的作用是使一组单选按钮中最多有一个单选按钮处于活动状态。您拥有的六个单选按钮彼此独立，因此切换其中一个不会切换现有的活动按钮。
请参阅文档。您需要对所有六个单选按钮使用相同的name。既然它们定义了您的菜单，我们就称之为name="menu"。
另一件事：</input>无效；删除它。
另一个建议是：你的<label>不要填满菜单项的整个高度；将CCD_ 5s直接替换为CCD_ 6s。他们似乎还有一些底线，但我相信你可以找到另一个解决方案。
.row {
background-color: #f4f4f4;
border-bottom: 1px solid #dbdbdb;
text-align: center;
border-right: 1px solid #dbdbdb;
margin: 0px;
}
span {
position: relative;
left: 0;
bottom: 0;
width: 16.33%;
border-bottom: 2px black solid;
transition: all .5s;
}
#friendBox:checked~span {
left: 0%;
}
#sellerBox:checked~span {
left: 16.33%;
}
#familyBox:checked~span {
left: 33.33%;
}
#clientsBox:checked~span {
left: 50%;
}
#childrenBox:checked~span {
left: 67%;
}
#elderBox:checked~span {
left: 83.75%;
}
input[type="radio"] {
position: absolute;
left: -100vw;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<input id="friendBox" type="radio" name="menu">
<input id="sellerBox" type="radio" name="menu">
<input id="familyBox" type="radio" name="menu">
<input id="clientsBox" type="radio" name="menu">
<input id="childrenBox" type="radio" name="menu">
<input id="elderBox" type="radio" name="menu">
<label class="col-sm-2" for="friendBox">Friends</label>
<label class="col-sm-2" for="sellerBox">Service Providers</label>
<label class="col-sm-2" for="familyBox">Family</label>
<label class="col-sm-2" for="clientsBox">Clients</label>
<label class="col-sm-2" for="childrenBox">Children</label>
<label class="col-sm-2" for="elderBox">Elders</label>
<span></span>
</div>
</div>
</body>
</html>