#html #css #frontend
Вопрос:
Ниже приведен код, который я использую. Я не могу, после повторной оценки кода в течение более часа, понять, почему весь 3-й столбец на моем сеточном дисплее отображается неправильно.
Я искал код «курсор: указатель» там, где его не должно быть, и попытался перепроектировать его, используя цвета фона, чтобы найти проблемы с размещением. Может ли кто-нибудь пролить свет или попытаться понять, почему это не работает? Благодарен за любые и все отзывы.
/* Fund Library Section */ .fund { background: #000000; padding: 40px 0; } .fund__container { display: grid; grid-template-columns: 1fr 1fr 1fr; } .fund__container h1 { font-size: 4rem; color: #fff; grid-column: 1 / span 3; justify-self: center; padding-bottom: 15px; } .row_user { grid-column: 1; justify-self: center; padding-left: 35px; background: #fff; } .label_title { font-size: 25px; padding: 0 12px 6px 0; color: #fff; font-weight: bold; } .label { font-size: 25px; padding: 18px 12px 6px 0; color: #fff; font-weight: bold; } .textbox { padding-left: 10px; } input[type="text"], input[type="number"], select, textarea { width: 55%; padding: 6px; padding-left: 5px; border: 1px solid #4287f5; border-radius: 10px; box-sizing: border-box; resize: vertical; font-size: 20px; } .row_button { background: #fff; grid-column: 2; justify-self: center; } .main_btn { font-size: 1.8rem; background: #1e3c72; padding: 20px 60px; border: none; border-radius: 4px; margin-top: 10rem; cursor: pointer; position: relative; transition: all 0.35s; outline: none; } .main_btn a { position: relative; z-index: 2; color: #fff; text-decoration: none; } .main_btn:after { position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: #fd1d1d; transition: all 0.35s; border-radius: 4px; } .main_btn:hover { color: #fff; } .main_btn:hover:after { width: 100%; } .row_fund-frame { background: #fff; height: 100%; grid-column: 3; justify-self: center; } .static_labels { justify-self: center; } lt;!-- Fund Library Section --gt; lt;div class="fund" id="home"gt; lt;div class="fund__container"gt; lt;h1gt;Fund Librarylt;/h1gt; lt;div class="row_user"gt; lt;div class="label_title"gt; lt;label for="fundticker"gt;Fund Tickerlt;/labelgt; lt;/divgt; lt;div class="textbox"gt; lt;input type="text" id="fundticker" name="fundticker" placeholder="Example: AGTHX" /gt; lt;/divgt; lt;div class="label"gt; lt;label for="short-low"gt;Short Term Capital Gain (Low) %lt;/labelgt; lt;/divgt; lt;div class="textbox"gt; lt;input type="number" id="short-low" name="short-low" placeholder="Enter %..." /gt; lt;/divgt; lt;div class="label"gt; lt;label for="short-high"gt;Short Term Capital Gain (High) %lt;/labelgt; lt;/divgt; lt;div class="textbox"gt; lt;input type="number" id="short-high" name="short-high" placeholder="Enter %..." /gt; lt;/divgt; lt;div class="label"gt; lt;label for="long-low"gt;Long Term Capital Gain (Low) %lt;/labelgt; lt;/divgt; lt;div class="textbox"gt; lt;input type="number" id="long-low" name="long-low" placeholder="Enter %..." /gt; lt;/divgt; lt;div class="label"gt; lt;label for="long-high"gt;Long Term Capital Gain (High) %lt;/labelgt; lt;/divgt; lt;div class="textbox"gt; lt;input type="number" id="long-high" name="long-high" placeholder="Enter %..." /gt; lt;/divgt; lt;/divgt; lt;div class="row_button"gt; lt;button class="main_btn"gt;lt;a href="#"gt;Submit Fundlt;/buttongt; lt;/divgt; lt;div class="row_fund-frame"gt; lt;ol class="static_labels"gt; lt;li class="static_fund"gt;Fund Namelt;/ligt; lt;li class="static_fund"gt;Fund Tickerlt;/ligt; lt;li class="static_fund"gt;Short Capital Gains %slt;/ligt; lt;li class="static_fund"gt;Long Capital Gains %slt;/ligt; lt;/olgt; lt;ol class="dynamic_labels"gt; lt;li class="dynamic_fund"gt;DB Fund Namelt;/ligt; lt;li class="dynamic_fund"gt;DB Fund Tickerlt;/ligt; lt;li class="dynamic_fund"gt;DB Short Capital Gains %slt;/ligt; lt;li class="dynamic_fund"gt;DB Long Capital Gains %slt;/ligt; lt;/olgt; lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. Я обновил свою одежду, чтобы вы могли видеть, что это работает.
2. Вы не можете иметь
aвнутриbutton(или наоборот).3. @connexo большое спасибо вам, ребята, за вашу помощь. Я действительно ценю это.
Ответ №1:
Исправьте ошибку в вашей разметке
Как отметил @connexo в комментариях, у вас есть тег привязки внутри тега кнопки. Что еще более важно, вы никогда не закрываете тег A, поэтому тег кнопки продолжает закрывать оставшуюся часть третьего столбца. Вот оскорбительная реплика:
lt;button class="main_btn"gt;lt;a href="#"gt;Submit Fundlt;/buttongt; И это должна быть либо кнопка, ЛИБО якорь, а не и то, и другое.
Комментарии:
1. Большое спасибо. Ваше решение очень помогло. Могу я спросить, я считаю, что основная причина, по которой тег lt;якорьgt; был полезен, заключалась в анимации «слайд», которую вы получаете при наведении курсора мыши на саму кнопку. Когда я удаляю теги lt;якорьgt;, анимация работает неправильно. Есть ли способ изменить положение этой анимации так, чтобы тег lt;якорьgt; не требовался? Дайте мне знать, если этот вопрос имеет смысл. Еще раз спасибо 🙂