Блог

Главная - Вопросы по программированию - Как расположить текст на левой стороне навигационной панели, не нажимая кнопки справа?

Как расположить текст на левой стороне навигационной панели, не нажимая кнопки справа?

#html #css

Вопрос:

Я работаю над мобильным веб-приложением с размером экрана 360 X 640. Я хочу отобразить текст /заголовок внутри навигационной панели с левой стороны, но я не могу этого сделать, так как кнопки на навигационной панели выровнены по правому краю в положении выравнивания .Я пробовал использовать float :также слева, но это не работает.

Пожалуйста, помогите . Мой интерфейс

введите описание изображения здесь

Я хочу получить это(изображение ниже), я хочу переместить текст «Поговорить с астрологом» в навигационной панели слева, не влияя на положение других кнопок. » введите описание изображения здесь

 //HTML CODE
<div class ="search-bar sticky-top " >

<ul class="navbar navbar-light bg-light   justify-content-end">

    <a class="navbar-brand" href="#">
      <img src="../assets/search.png" width="30" height="30" alt="">
    </a>
    <a class="navbar-brand" href="#">
        <img src="../assets/filter.png" width="30" height="30" alt="">
      </a>
      <a class="navbar-brand" href="#">
        <img src="../assets/sort.png" width="30" height="30" alt="">
      </a>
</ul>

</div>

<h1 ><b>Talk to an Astrologer</b></h1> //move this inside nav bar on the left

Ответ №1:

Вы можете использовать приведенный ниже код для достижения ожидаемых результатов.

 .wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center;
} 
 <div class="wrapper">
<h1 ><b>Talk to an Astrologer</b></h1>
<div class ="search-bar sticky-top " >

<ul class="navbar navbar-light bg-light   justify-content-end">

    <a class="navbar-brand" href="#">
      <img src="../assets/search.png" width="30" height="30" alt="">
    </a>
    <a class="navbar-brand" href="#">
        <img src="../assets/filter.png" width="30" height="30" alt="">
      </a>
      <a class="navbar-brand" href="#">
        <img src="../assets/sort.png" width="30" height="30" alt="">
      </a>
</ul>

</div>
</div>

Я внес некоторые изменения в ваш код,

  1. Я переместил ваш тег h1 поверх всех ваших элементов.
  2. Я завернул все в обертку div.
  3. Я применил свойство display flex к div-оболочке.

Комментарии:

1. приветствую вас, но вы одобрили другой ответ. @NatashaAnderson Не моя.

2. Прости!!!!! Моя вина

Ответ №2:

       <div class="search-bar sticky-top ">
        <ul class="navbar navbar-light bg-light   justify-content-between">
          <h1>
            <b>Talk to an Astrologer</b>
          </h1>
          <div>
            <a class="navbar-brand" href="#">
              <img src="../assets/search.png" width="30" height="30" alt="" />
            </a>
            <a class="navbar-brand" href="#">
              <img src="../assets/filter.png" width="30" height="30" alt="" />
            </a>
            <a class="navbar-brand" href="#">
              <img src="../assets/sort.png" width="30" height="30" alt="" />
            </a>
          </div>
        </ul>
      </div>

вот как вы это делаете. Оберните все теги привязки в один div. поместите метку h1 на тот же уровень, что и она. Затем на их родителя, вызов justify-content:"space-between" которого в начальной загрузке есть justify-content-btween .

Метки: ,