小编Sat*_*eru的帖子

我有一个无序列表元素，如下所示：

     <ul className={styles["projects-pd-subdetails-list"]}>
        {detail.subdetails.map((sub) => (
          <li
             className={styles["projects-pd-text projects-pd-subdetail"]}
          >
            {sub}
          </li>
        ))}
     </ul>

使用普通的 React 元素，我可以为该li元素应用多个类，如下所示：

<li className="projects-pd-text projects-pd-subdetail">{sub}</li>

然而，像我在 nextjs 中那样有一个空格意味着样式会被忽略。我怎样才能解决这个问题并正确解释我的li元素的两个类名？

我想在聚焦时更改边框宽度。我的输入框有 1px 实线边框。当聚焦时，它会改变 2px 不同颜色的实线边框。但是有1px的差异，所以包含这个输入框的div在焦点时改变了它的宽度1px。我想解决这个问题。我是 html 和 css 的初学者，所以我正在寻求您的帮助。谢谢。

.contact-input {
  border: 1px solid #707070;
  border-radius: 10px;
  margin-top: 1.5rem;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
  padding: 1.5rem;
}

.contact-label {
  padding-bottom: 2rem;
}

.contact-input input[type="text"] {
  outline: none;
  border: none;
  border-bottom: 1px solid #707070;
  width: 40%;
}

.contact-input input[type="text"]:focus {
  outline: none;
  border-bottom: 2px solid #3AD6B1;
}

<div class="contact-input">
  <div class="contact-label">Name</div>
  <input class="w-50" type="text" placeholder="Your answer">
</div>