#html #css
Вопрос:
Я создаю сайт, и текст, в котором говорится, что нового в приведенном ниже фрагменте кода, не помещается в верхней части созданного мной поля.
:root { --border-width: 100px; --border-height: 200px; --border-color: #000; --box-color: #A8CCC9; --background-color: #75B9BE; } .lftSector { border-style: dashed; width: var(--border-width, 100px); height: var(--border-height, 200px); padding: 50px; border: 6px solid var(--border-color, gray); background-color: var(--box-color); } body { background-color: var(--background-color); } ol { width: var(--border-width); float: left; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css"> <title>Gallery</title> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Source Code Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900amp;display=swap" rel="stylesheet"> <link href="gstyle.css" rel="stylesheet"> </head> <body> <h1> Welcome to the gallery</h1> <div class="lftSector"> <h1 class="content">What's New?</h1> <ol> <a href="linkoftruth" ><li><div id="beta">[BETA]</div> Transformation</li></a> </ol> </div> </body> </html> Как вы видите, это создает фон с полем и текстом. Пожалуйста, покажите мне, как расположить <h1> в верхней части коробки рамку, которую я создал.
Ответ №1:
Это должно помочь. Это заполнение размером 50 пикселей было удалено, а затем ширина и минимальная ширина использовались для управления шириной коробки. Также применил css для полей h1 .
:root { --border-width: 100px; --border-height: 200px; --border-color: #000; --box-color: #A8CCC9; --background-color: #75B9BE; } .lftSector { border-style: dashed; width: 50%; /* changed */ min-width: 200px; /* added */ height: var(--border-height, 200px); border: 6px solid var(--border-color, gray); background-color: var(--box-color); } body { background-color: var(--background-color); } ol { width: var(--border-width); float: left; } .content { /* added */ margin: 0 .5rem; /* added */ } /* added */ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css"> <title>Gallery</title> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Source Code Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900amp;display=swap" rel="stylesheet"> <link href="gstyle.css" rel="stylesheet"> </head> <body> <h1> Welcome to the gallery</h1> <div class="lftSector"> <h1 class="content">What's New?</h1> <ol> <a href="linkoftruth"> <li> <div id="beta">[BETA]</div> Transformation</li> </a> </ol> </div> </body> </html> Ответ №2:
С вашим кодом было несколько проблем. Во-первых, заголовок был размазан, потому что вы использовали заполнение, чтобы придать вашему div его размер, в отличие от ширины и высоты. Затем вы вызывали переменные из :root, но также пытались передать значения в эти переменные. Чтобы добиться вашего решения, я исправил упомянутые проблемы, а также создал два новых раздела div — один для заголовка и один для списка. Кроме того, вы упаковывали свои элементы li в теги. Все должно быть наоборот.
:root { --border-width: 100px; --border-height: 200px; --border-color: #000; --box-color: #A8CCC9; --background-color: #75B9BE; } body { background-color: var(--background-color); } .lftSector { width: 300px; height: 300px; border: 6px solid var(--border-color, gray); background-color: var(--box-color); } .lftSector > div { width: 100%; text-align: center; height: 20%; display: flex; justify-content: center; align-items: center; } #content { width: 100%; height: 80%; } <h1> Welcome to the gallery</h1> <div class="lftSector"> <div> <h1 class="content">What's New?</h1> </div> <div id="content"> <ol> <li><a href="linkoftruth"><span id="beta">[BETA]</span>Transformation</a></li> </ol> </div> </div> Кроме того, я бы рекомендовал обычно устанавливать ширину в процентах или на основе vw/vh. Просто чаевые.