Как я могу добавить пробел между элементами в JavaScript (React)?
Позвольте мне начать с того, что я новичок в JavaScript и React. Я делаю страницу с заголовком и таблицей MUI под ней, которая в настоящее время выглядит так:
Однако я хочу добавить пробел между заголовком и таблицей, но не могу понять, как это сделать.
Вот как выглядит код:
return (
<div className = "dates" >
<div>
<h1 style = {{ fontSize: 40 }}>Upcoming Import Dates</h1>
</div>
<div>
<TableContainer component = {Paper} style = {{ width: 900, backgroundColor: "#dbdbdb"}}>
<Table>
<TableHead>
<TableRow >
<TableCell align = "left" style = {{ width: 200 }}>Date</TableCell>
<TableCell align = "left">Time</TableCell>
<TableCell align = "left">Event</TableCell>
<TableCell align = "left" style = {{ width: 350 }}>Location</TableCell>
</TableRow>
</TableHead>
<TableBody>
{dates.map((dates) => (
<TableRow key = {dates.number}>
<TableCell align = "left">{dates.EventDate}</TableCell>
<TableCell align = "left">{dates.StartTime}</TableCell>
<TableCell align = "left">{dates.Description}</TableCell>
<TableCell align = "left">{dates.Location}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
);
Я попытался добавить margin-bottom в класс css и добавить его в div, но это не сработало. Я посмотрел в Интернете и не могу ничего найти, поэтому любая помощь будет оценена по достоинству.
Добавление полей тривиально просто, поэтому вы, вероятно, неправильно применяли имя класса к элементу. Возможно, вы неправильно написали класс, или вы неправильно импортируете CSS, или что-то еще. Используйте инструменты отладки Chrome, чтобы проверить, какие классы и стили применяются к каким элементам. Этот вопрос будет закрыт, если вы не предоставите более конкретные сведения о том, что означает «не работает».
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Чтобы добавить пространство между заголовком и таблицей в вашем коде React, вы можете применить поля или отступы к элементам с помощью CSS. Вот как вы можете изменить свой код, чтобы добиться этого:
- Добавьте класс CSS в div, содержащий элемент title: Джекс:
**
<div className = "title-container">
<h1 style = {{ fontSize: 40 }}>Upcoming Import Dates</h1>
</div>
** Определите класс CSS в своем компоненте или в отдельном файле CSS:
import './YourComponent.css'; // Import the CSS file if using a separate file
...
// In your component
return (
<div className = "dates">
<div className = "title-container">
<h1 style = {{ fontSize: 40 }}>Upcoming Import Dates</h1>
</div>
{/* Rest of the code */}
</div>
);
Добавьте поля или отступы в класс CSS, чтобы создать желаемый интервал. Например, чтобы добавить margin-bottom между заголовком и таблицей:
.title-container {
margin-bottom: 20px;
}
Применив margin-bottom к div-контейнеру title, вы создадите пространство между заголовком и таблицей. Отрегулируйте значение поля для достижения желаемого интервала.
Убедитесь, что класс CSS правильно импортирован или определен в компоненте, и что файл CSS правильно связан, если используется отдельный файл CSS.
Этот ответ выглядит как ChatGPT
@Gautam - Добро пожаловать в Stack Overflow. Похоже, вы давно не публиковали сообщения и, возможно, не знаете о текущих правилах, поскольку все восемь ваших недавних ответов, вероятно, были полностью или частично написаны ИИ (например, ChatGPT). Имейте в виду, что публикация материалов, созданных искусственным интеллектом, здесь запрещена. Если вы использовали инструмент ИИ, чтобы помочь с каким-либо ответом, я бы посоветовал вам удалить его. Спасибо!
Читатели должны тщательно и критически рассмотреть этот ответ, поскольку информация, сгенерированная ИИ, часто содержит фундаментальные ошибки и дезинформацию. Если вы наблюдаете проблемы с качеством и/или у вас есть основания полагать, что этот ответ был сгенерирован искусственным интеллектом, пожалуйста, оставьте соответствующий отзыв. Команда модераторов может использовать вашу помощь для выявления проблем с качеством.
@DavidW, вы можете сказать что-нибудь об этом в ответ. Не каждый ответ может быть использован AI или ChatGPT.
Не будьте нечестным мошенником. Этот ответ выглядит так, как будто он был сгенерирован ИИ (например, ChatGPT), а не реальным человеком. Вы должны знать, что публикация результатов, сгенерированных ИИ, официально ЗАПРЕЩЕНА на Stack Overflow . Если этот ответ действительно был сгенерирован ИИ, то я настоятельно рекомендую вам удалить его, прежде чем у вас возникнут еще большие проблемы: ЗДЕСЬ МЫ СЕРЬЕЗНО ПРИНИМАЕМ ПЛАГИАТ, хотя вы явно этого не делаете. Пожалуйста, прочтите: Почему размещение ответов, сгенерированных GPT и ChatGPT, в настоящее время не разрешено.
какой элемент вы дали margin-bottom?