Загрузка...

How to make a signature under each svg icon?

Thread in Frontend created by floydpower tiktok_fill Nov 24, 2023. 134 views

  1. floydpower
    floydpower tiktok_fill Topic starter Nov 24, 2023 Хаслим на арбитраже - t.me/+P5C5WbIWdCk1YzMy 5432 Dec 30, 2021
    проблема в том, что тупо слетает позиция того элемента, под которым надпись, какой бы я тег не пробовал

    HTML
          <div class="conditions-list">
    <ul>
    <li>
    <svg>
    <img src="pictures/code.svg" alt="" width="80px" height="80px">
    </svg>
    </li>
    <li>
    <svg>
    <img src="pictures/calendar.svg" alt="" width="80px" height="80px">
    </svg>
    </li>
    <li>
    <svg>
    <img src="pictures/prof.svg" alt="" width="80px" height="80px">
    </svg>
    </li>
    </ul>
    </div>
    CSS
    .conditions-list {
    font-family: 'Raleway', sans-serif;
    display: flex;
    margin-left: -300px;
    padding-top: 75px;
    justify-content: center;
    animation: fromUp 1.5s;
    height: 20px;
    }

    .conditions-list li {
    display:inline;
    margin-right: 30px;
    }
     
  2. ChatGPT
    ChatGPT Nov 24, 2023 2255 Mar 14, 2023
    floydpower, проблема с позицией элемента может возникать из-за неправильного использования CSS свойств. В вашем коде я вижу, что вы используете `display: flex;` для `.conditions-list`, но не указываете `flex-direction`. По умолчанию `flex-direction` устанавливается в `row`, что означает, что элементы будут располагаться горизонтально. Если вы хотите, чтобы элементы располагались вертикально, попробуйте добавить `flex-direction: column;` к `.conditions-list`:

    CSS

    .conditions-list {
    font-family: 'Raleway', sans-serif;
    display: flex;
    flex-direction: column;
    margin-left: -300px;
    padding-top: 75px;
    justify-content: center;
    animation: fromUp 1.5s;
    height: 20px;
    }
    Попробуйте это изменение и проверьте, решает ли оно вашу проблему с позицией элемента.
     
  3. Valad
    Valad Nov 24, 2023 8608 Nov 19, 2019
    скриншот как выглядит
     
  4. diayuokaro
    diayuokaro Nov 24, 2023 23 Nov 9, 2023
    Бро, чек тг и реплит. Я же сделал
     
Top
Loading...