#html #css
Вопрос:
/* GLOBAL */
* {
font-family: sans-serif;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* MAIN */
.container {
display: grid;
place-content: center;
min-height: 50vh;
}
.main {
border: 2px solid black;
padding: 5px 60px 80px 60px;
border-radius: 2px;
}
.btn {
width: 100%;
background-color: #2cdb2c;
border-radius: 4px;
border: none;
}
.workouts {
display: grid;
line-height: 1.2rem;
border-top: 2px solid #b8b8b8;
width: 100vw;
height: 100vh;
text-align: center;
padding-top: 12px;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(900px, 1fr));
grid-auto-rows: 240px;
}
.workout {
background-color: #b8b8b8;
width: 15%;
padding-top: 20px;
border-radius: 6px;
}
/* BUTTONS */
.btn {
width: 100%;
line-height: 2rem;
padding-top: 8px;
background-color: #11992c;
color: white;
border-radius: 6px;
border: none;
transition: all 0.1s ease-in-out;
}
.btn-workout {
width: 50%;
line-height: 2rem;
padding-top: 8px;
background-color: #11992c;
color: white;
border-radius: 6px;
border: none;
transition: all 0.1s ease-in-out;
}
.btn-text {
font-weight: 500;
font-size: 20px;
}
.btn:hover {
opacity: 0.7;
cursor: pointer;
border-radius: 8px;
} <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Workout App</title>
</head>
<body>
<div class="container">
<div class="main">
<h2>
WorkoutApp
<div>
<button class="btn btn-text" id="addBtn">
Add Workout
</button>
</div>
</h2>
</div>
</div>
<div class="workouts">
<div class="workout">
<h2>Name: <span>Test1</span></h2>
<p>3 sets of 20</p>
<button class="btn-workout">Done</button>
</div>
<div class="workout">
<h2>Name: <span>Test2</span></h2>
<p>3 sets of 20</p>
<button class="btn-workout">Done</button>
</div>
<div class="workout">
<h2>Name: <span>Test3</span></h2>
<p>3 sets of 20</p>
<button class="btn-workout">Done</button>
</div>
</div>
</body>
</html> Я хочу, чтобы эти поля задач с классом «тренировка», который является классом его родителей «тренировка», располагались горизонтально, но я просто не знаю, как это сделать, любая помощь приветствуется!
//
И да, мой css ужасен, поэтому говорить мне, что я могу изменить, — это лишнее!
Несвязанный вопрос: Как я могу сделать так, чтобы кнопка, которая находится в теге «h2», не влияла на положение тега «h2»
Ответ №1:
У вас есть повторяющиеся столбцы сетки размером не менее 900 пикселей или не более 1 fr. Это означает, что размер каждого столбца сетки будет не менее 900 пикселей, что довольно велико, для отображения нескольких элементов сетки в формате горизонтальной строки ширина окна просмотра должна составлять не менее 1800 пикселей, чтобы учесть пространство двух столбцов сетки размером 900 пикселей.
Поскольку вы явно определяете width: 15% элементы сетки, это ограничивает их заполнение всей области сетки. Если вы обновите свое grid-template-columns использование, чтобы уменьшить минимальный размер столбца, скажем 200px (или что бы вы ни считали нужным), затем удалите элементы width: 15% в .workout сетке, тогда у вас будет макет горизонтальной строки, который вы ищете.
/* GLOBAL */
* {
font-family: sans-serif;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* MAIN */
.container {
display: grid;
place-content: center;
min-height: 50vh;
}
.main {
border: 2px solid black;
padding: 5px 60px 80px 60px;
border-radius: 2px;
}
.btn {
width: 100%;
background-color: #2cdb2c;
border-radius: 4px;
border: none;
}
.workouts {
display: grid;
line-height: 1.2rem;
border-top: 2px solid #b8b8b8;
width: 100vw;
height: 100vh;
text-align: center;
padding-top: 12px;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 240px;
}
.workout {
background-color: #b8b8b8;
width: auto;
padding-top: 20px;
border-radius: 6px;
}
/* BUTTONS */
.btn {
width: 100%;
line-height: 2rem;
padding-top: 8px;
background-color: #11992c;
color: white;
border-radius: 6px;
border: none;
transition: all 0.1s ease-in-out;
}
.btn-workout {
width: 50%;
line-height: 2rem;
padding-top: 8px;
background-color: #11992c;
color: white;
border-radius: 6px;
border: none;
transition: all 0.1s ease-in-out;
}
.btn-text {
font-weight: 500;
font-size: 20px;
}
.btn:hover {
opacity: 0.7;
cursor: pointer;
border-radius: 8px;
} <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Workout App</title>
</head>
<body>
<div class="container">
<div class="main">
<h2>
WorkoutApp
<div>
<button class="btn btn-text" id="addBtn">
Add Workout
</button>
</div>
</h2>
</div>
</div>
<div class="workouts">
<div class="workout">
<h2>Name: <span>Test1</span></h2>
<p>3 sets of 20</p>
<button class="btn-workout">Done</button>
</div>
<div class="workout">
<h2>Name: <span>Test2</span></h2>
<p>3 sets of 20</p>
<button class="btn-workout">Done</button>
</div>
<div class="workout">
<h2>Name: <span>Test3</span></h2>
<p>3 sets of 20</p>
<button class="btn-workout">Done</button>
</div>
<div class="workout">
<h2>Name: <span>Test4</span></h2>
<p>4 sets of 20</p>
<button class="btn-workout">Done</button>
</div>
</div>
</body>
</html>