@Wellmaks31

Не получается поставить поисковую строку справа, что сделать чтобы исправить?

<div class="pagesi">
   <div class="upper">
      <a href="#">Статья |</a>
      <a href="#">обсуждение |</a>
   </div> 
   <div class="upper">
      <div class="search-form">
         <input class="search-form_txt" type="email" placeholder="Search...">
         <button class="search-form_btn"><img class="search-form_img" src="static/images/search.jpg" alt="image"></button>
      </div>
      <a class="textRight" href="#">История |</a>
      <a class="textRight" href="#">Править код |</a>
      <a class="textRight" href="#">Править |</a>
      <a class="textRight" href="#">| Читать |</a>
</div>


вот стили
.pagesi {
    display: flex;
    margin: 0;
    border-bottom: 1px solid;
}
 
.upper {
    /* типо шапка */
    width: 50%;
    margin: 0;
}
.upper>a {
    margin: 0;
}
 
.textRight {
    margin-right: 2px;
    float: right;
    /* без float не работает, хз почему, но когда большще чем 1 тэг
    то ставь его*/
    text-align: right;
}
 
.search-form {
    border: 1px solid tomato;
    display: inline-flex;
    text-align: right;
    padding: 0 20px;
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
    background-color: wheat;
}
 
.search-form_txt {
    border: none;
    width: 200px;
    outline: none;
    font-size: 150%;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
    /* расстояние до картинки  */
    background-color: transparent;
}
 
.search-form_btn {
    border: none;
    margin: 0;
    background-color: transparent;
 
}
 
.search-form_img {
    display: flex;
    /* это чтобы занимало столько сколько следует и не более */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    cursor: pointer;
}
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы