React开发CRUD应用时部分按钮样式显示异常该如何解决？

问题根因 #

你编写的CSS仅对#create-div容器下的所有input元素设置了内边距、外边距、字体粗细、边框等基础样式，位于#update-delete-div下的两个操作按钮没有匹配到对应的基础样式规则，同时两个按钮设置的15%宽度过窄，无法完整容纳按钮文字，最终导致样式不符合预期。

修复方案 #

1. 调整input通用样式规则，覆盖两个子容器下的所有输入框和按钮，同时把宽度属性从通用规则中拆分出来单独配置：

/* 把原有的#create-div input规则替换为以下内容 */
#create-div input,
#update-delete-div input
{
  color: #777;
  font-weight: bold;
  padding: 10px;
  margin: 10px;
  border: 1px solid #afafaf;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
  outline: none;
}

2. 调整三个按钮的宽度，适配不同长度的按钮文字：

#create-div #create
{
  color: white;
  width: 25%;
  border: 0px solid transparent;
  outline: none;
  cursor: pointer;
  background: #0aee62;
}

#update-delete-div #update
{
  color: white;
  width: 35%;
  border: 0px solid transparent;
  outline: none;
  cursor: pointer;
  background: #1501c2;
}

#update-delete-div #delete
{
  color: white;
  width: 25%;
  border: 0px solid transparent;
  outline: none;
  cursor: pointer;
  background: #d60a0a;
}

3. 可选优化：添加全局盒模型规则，避免padding、边框撑开元素宽度导致布局错位：

*
{
  -webkit-transition: all 0.3s ease;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Oguzhan