【发布时间】：2021-11-19 04:53:02
【问题描述】：
我正在尝试在 React 中创建一个 crud 应用程序。
从图片中可以看出，有些按钮看起来不一样，我不知道为什么。
你能帮我找出错误吗，我找不到它并且已经花了几个小时。
正如您从图片中看到的那样，“Günelle”和“Sil”按钮看起来不像它们应有的样子。
图片：
ScreenShot
这是我的 .js 和 .css 文件：
import React from "react";
import { useNavigate } from "react-router-dom";
import "./İlCrud.css";
export default function İlCrud() {
let navigate = useNavigate();
return (
<div id="il-crud-div">
<h3>İl CRUD</h3>
<div id="create-div">
<input type="text" name="ilKodu" placeholder="İl Kodu..."/>
<br/>
<input type="text" name="ilAdi" placeholder="İl Adi..."/>
<br/>
<input type="button" id="create" value="Yarat"/>
</div>
<div id="update-delete-div">
<input type="button" id="update" value="Güncelle"/>
<input type="button" id="delete" value="Sil"/>
</div>
</div>
);
}
在这里，我创建了一个容器 div，并在其中创建了 2 个 div。我已经创建了一些按钮和输入区域。
@import url(https://fonts.googleapis.com/css?family=Prosto+One);
*
{
-webkit-transition: all 0.3s ease;
}
body
{
overflow: hidden;
margin: 0px;
padding: 0px;
font-family: 'Prosto One', cursive;
background: url('https://subtlepatterns.com/patterns/egg_shell.png');
_background: #eee;
}
#il-crud-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 75%;
margin-left: 10%;
margin-top: 120px;
text-align: center;
padding: 40px;
padding-bottom: 300px;
padding-top: 40px;
border-radius: 3px;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
}
#create-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 45%;
padding-top: 20px;
margin-right: 10%;
text-align: center;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
float: left;
}
#update-delete-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 45%;
padding-top: 20px;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
float: left;
}
#create-div input
{
color: #777;
font-weight: bold;
width: 40%;
padding: 10px;
margin: 10px;
border: 1px solid #afafaf;
border-radius: 3px;
background: rgba(255, 255, 255, 0.5);
outline: none;
}
#create-div #create
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #0aee62;
}
#update-delete-div #update
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #1501c2;
}
#update-delete-div #delete
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #d60a0a;
}
【问题讨论】：
-
尝试在你的 CSS 中将
#create-div input更改为#il-crud-div input。 -
不需要堆叠多个 id 选择器，因为每个 id 在您的文档中只能分配一次（即
#create-div #create和#create具有相同的结果）。如果您希望多次使用相同的 id，请改用类。 -
ID 应该只用于 javascript 等，不推荐用于样式。但这是你的项目并坚持下去。