Как разместить значки со стрелками над и под полем ввода? - PullRequest
Новая
       12

Как разместить значки со стрелками над и под полем ввода?

1 голос
/ 27 апреля 2020

Я использую Vuetify, и я создал строку с тремя столбцами, но для любви ко мне я не могу правильно выровнять значки над полями ввода, как на скриншоте под кодом. Значки ведут себя как элементы блока и располагаются рядом с полями ввода, а не над ними.

Вот изображение того, чего я достиг на данный момент:

enter image description here

Может ли кто-нибудь помочь мне или, по крайней мере, указать мне правильное направление? Заранее спасибо! 

<v-row>
    <v-col cols="4">       
      <v-icon>arrow_drop_up</v-icon>
      <input type="text" />
      <v-icon>arrow_drop_down</v-icon>
      <span>:</span>
      <v-icon>arrow_drop_up</v-icon>
      <input type="text" />
      <v-icon>arrow_drop_down</v-icon>
    </v-col>
<v-row>

enter image description here

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Вы можете выровнять это, используя классы flex. 

<v-col cols="4">
  <div class="d-flex flex-row align-center">
    <div class="d-flex flex-column align-center">
      <v-icon>arrow_drop_up</v-icon>
      <input type="text" />
      <v-icon>arrow_drop_down</v-icon>
    </div>
    <span class="mx-2">:</span>
    <div class="d-flex flex-column align-center">
      <v-icon>arrow_drop_up</v-icon>
      <input type="text" />
      <v-icon>arrow_drop_down</v-icon>
    </div>
  </div>
</v-col>

Я добавил ниже css для размера полей ввода. 

input{
  width: 20px;
  height:20px;
  border: solid thin blue
}

enter image description here

0 голосов
/ 28 апреля 2020

Разве вы не можете просто разместить такие элементы, как 

v-icon {
    position: absolute;
    top: 0;  //or bottom, left, right ro align
}

?

...