#html #css
#HTML #CSS
Вопрос:
Я пытаюсь выровнять два фавикона под span тегом для медиа-запроса в css, но у меня возникли проблемы. Я попытался поместить медиа-запрос, display: block; который перемещает два значка под промежутком, что хорошо, но затем он перемещает второй значок под первым
конечный результат должен выглядеть так, как показано ниже, после перехода на размер экрана 560 пикселей. Я прикрепил фрагмент
Check Us Out! icon_1 icon_2 #social_media{ background: linear-gradient(to right bottom, #270627, #3e0742, #550660, #6b0481, #8104a4, #921bb6, #a32cc9, #b43bdc, #c553e0, #d46ae4, #e27fe9, #ee95ee); padding: 10px; box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25); } #row_media{ text-align: center; width: 100%; } #social_media span{ margin-right: 20px; font-size: 30px; font-family: Impact, fantasy; color: white; } #social_media a{ text-decoration: none; } #social_media i{ margin-right: 8px; font-size: 30px; } @media screen and (max-width: 560px) { #social_media i{ display: block; } } lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/gt; lt;div id="social_media"gt; lt;div class="row" id="row_media"gt; lt;div class="col"gt; lt;spangt;Check Us Out!lt;/spangt; lt;a href="test.com"gt;lt;i class="fa fa-instagram"gt;lt;/igt;lt;/agt; lt;a href="#"gt;lt;i class="fa fa-facebook"gt;lt;/igt;lt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. Пожалуйста, исправьте скрипку, используя правильный импорт стилей, а также добавьте изображение того, как должен выглядеть конечный пользовательский интерфейс
Ответ №1:
#social_media{ background: linear-gradient(to right bottom, #270627, #3e0742, #550660, #6b0481, #8104a4, #921bb6, #a32cc9, #b43bdc, #c553e0, #d46ae4, #e27fe9, #ee95ee); padding: 10px; box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25); } #row_media{ text-align: center; width: 100%; } #social_media span{ margin-right: 20px; font-size: 30px; font-family: Impact, fantasy; color: white; } #social_media a{ text-decoration: none; display: inline-block; } #social_media i{ margin-right: 8px; font-size: 30px; } @media screen and (max-width: 560px) { #social_media i{ display: block; } } lt;div id="social_media"gt; lt;div class="row" id="row_media"gt; lt;div class="col"gt; lt;spangt;Check Us Out!lt;/spangt; lt;div class = "row"gt; lt;a href="test.com"gt;lt;i class="fa fa-instagram"gt;Inlt;/igt;lt;/agt; lt;a href="#"gt;lt;i class="fa fa-facebook"gt;Falt;/igt;lt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Ответ №2:
Я подготовил решение вашей проблемы. Я поместил значки fontawesome, lt;div class="icons"gt; а затем добавил настройку flex lt;divgt; .
#social_media{ background: linear-gradient(to right bottom, #270627, #3e0742, #550660, #6b0481, #8104a4, #921bb6, #a32cc9, #b43bdc, #c553e0, #d46ae4, #e27fe9, #ee95ee); padding: 10px; box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25); } i { color: whitesmoke; } .icons { display: flex; align-items: center; justify-content: center; } #row_media{ text-align: center; width: 100%; } #social_media span{ margin-right: 20px; font-size: 30px; font-family: Impact, fantasy; color: white; } #social_media a{ text-decoration: none; } #social_media i{ margin-right: 8px; font-size: 30px; } @media screen and (max-width: 560px) { #social_media i{ display: block; } } lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /gt; lt;link rel="stylesheet" href="style.css"gt; lt;titlegt;Documentlt;/titlegt; lt;/headgt; lt;bodygt; lt;div id="social_media"gt; lt;div class="row" id="row_media"gt; lt;div class="col"gt; lt;spangt;Check Us Out!lt;/spangt; lt;div class="icons"gt; lt;a href="test.com"gt;lt;i class="fab fa-instagram"gt;lt;/igt;lt;/agt; lt;a href="#"gt;lt;i class="fab fa-facebook"gt;lt;/igt;lt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Ответ №3:
ЧТОБЫ выровнять значки, используйте свойство flex, это позволит выровнять элементы рядом. Здесь я использовал свойство flex в Css, а затем применил его к своему HTML-коду. Я предоставил Css и Html-код для вашей справки
CSS
#social_media{ background: linear-gradient(to right bottom, #270627, #3e0742, #550660, #6b0481, #8104a4, #921bb6, #a32cc9, #b43bdc, #c553e0, #d46ae4, #e27fe9, #ee95ee); padding: 10px; box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25); } #row_media{ text-align: center; width: 100%; } .icon-decoration { width: 50%; float: left; padding: 20px; display:inline-block; margin-right:20px; flex: 1; border: 2px solid yellow; } #social_media span{ margin-right: 20px; font-size: 30px; font-family: Impact, fantasy; color: white; } #social_media a{ text-decoration: none; display: inline-block; } #social_media i{ margin-right: 8px; font-size: 30px; } @media screen and (max-width: 560px) { #social_media i{ display: block; } } HTML
lt;div id="social_media"gt; lt;div class="row" id="row_media"gt; lt;div class="icon-decoration"gt; lt;spangt;Check Us Out!lt;/spangt; lt;div class = "row"gt; lt;a href="test.com"gt;lt;i class="fa fa-instagram"gt;Inlt;/igt;lt;/agt; lt;a href="#"gt;lt;i class="fa fa-facebook"gt;Falt;/igt;lt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt;