Горизонтальное выравнивание элементов - Semantic-UI-реакции - PullRequest
Новая
       11

Горизонтальное выравнивание элементов - Semantic-UI-реакции

0 голосов
/ 19 января 2019

Решение : Добавить «inline» в Form.Group.Codepen: https://codesandbox.io/s/88v6zl66q8

Я настраиваю группу выбора формы в семантическом интерфейсе в реакции.Однако выравнивание по горизонтали отключено, поэтому элементы выбора Радио находятся над полем ввода (см. Прилагаемое изображение).

Как их выровнять?Я бы предпочел способ Semantic-UI, а не писать собственный CSS (но я открыт для предложений).Спасибо!

https://i.imgur.com/IW1imch.png

Размещение элементов в контейнере Grid или Menu не решает проблему. 

<Form.Group>
                <Form.Field>
                    <Radio />
                <Divider vertical hidden />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Input/>
                </Form.Field>
            </Form.Group>

Ответы [ 2 ]

0 голосов
/ 19 января 2019

Не совсем уверен, понял ли я, что вы имеете в виду. Но чтобы не допустить попадания переключателей над полем ввода, вы можете расположить их с помощью системы семантики: 

<Form>
  <Grid>
    <Grid.Column width={8} stretched verticalAlign="middle">
      <Form.Group inline className="no-margin">
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
       </Form.Group>
    </Grid.Column>
    <Grid.Column width={8}>
      <Form.Field>
        <Input
          label="Anden værdi"
          name="n"
          type='text'
          labelPosition='right'
        />
      </Form.Field>
    </Grid.Column>
  </Grid>
</Form>

Таким образом, вы можете добиться вертикального выравнивания с verticalAlign="middle". Проблема в том, что по умолчанию у семантических полей есть запас. Мы можем преодолеть это только путем добавления класса и написания дополнительного аргумента css: 

.no-margin {
  margin: 0 !important;
}

(см. Кодовый блок: https://codesandbox.io/s/m3y9zpw358)

0 голосов
/ 19 января 2019

Я думаю, что самым простым способом было бы поместить их в display: flex контейнер и установить align-items: center на него, как объяснено здесь .

...