Флажки не работают должным образом - PullRequest
Новая
       18

Флажки не работают должным образом

0 голосов
/ 07 мая 2019

У меня есть несколько полей, определенных в моем HTML-шаблоне с чабрецом, которые являются флажками, и код с ними, как показано ниже. Значения для флажков возвращаются из контроллера Springboot 

<table>
<tr>
                <td>
                    Applicable on&nbsp;&nbsp;
                                <span th:each="checkboxvalue : ${appOnValues}">
                                    <input type = "checkbox" th:field = "*{channel}" th:value = "${checkboxvalue}" />
                                    <label th:for = "${#ids.prev('channel')}" th:text = "${checkboxvalue}">
                                    </label>&nbsp;&nbsp;
                                </span>
                </td>              
            </tr>
            <tr>
                <td>
                    Filter Level&nbsp;&nbsp;
                                    <span th:each="radiovalue : ${filterLevelValues}">
                                        <input type = "radio" th:field = "*{filterLevel}" th:value = "${radiovalue}" />
                                        <label th:for = "${#ids.prev('filterLevel')}" th:text = "${radiovalue}">
                                        </label>
                                    </span>
                </td>              
            </tr>
</table>

Вот скриншот файла HTML с кодом выше

Checkboxes image

Сейчас я пытаюсь выровнять флажки по горизонтали, но я не могу этого сделать. Вот CSS-файлы, используемые в HTML 

<link rel="stylesheet" type="text/css" href="/css/util.css" th:href="@{/css/util.css}">
    <link rel="stylesheet" type="text/css" href="/css/main.css" th:href="@{/css/main.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel = "stylesheet" href = "/css/tags.css" th:href="@{/css/tags.css}">

Я не уверен, связано ли это с конфликтом из-за какого-либо файла CSS. Может кто-нибудь помочь мне решить эту проблему?

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Вам необходимо добавить vertical-align: middle; к span и input, как показано ниже:

span {
  vertical-align: middle;
}

input {
  margin: 0;
  vertical-align: middle;
}
<table>
  <tr>
    <td>
      Applicable on&nbsp;&nbsp;
      <span th:each="checkboxvalue : ${appOnValues}">
                                    <input type = "checkbox" th:field = "*{channel}" th:value = "${checkboxvalue}" />
                                    <label th:for = "${#ids.prev('channel')}" th:text = "${checkboxvalue}">
                                    </label>&nbsp;&nbsp;
                                </span>
    </td>
  </tr>
  <tr>
    <td>
      Filter Level&nbsp;&nbsp;
      <span th:each="radiovalue : ${filterLevelValues}">
                                        <input type = "radio" th:field = "*{filterLevel}" th:value = "${radiovalue}" />
                                        <label th:for = "${#ids.prev('filterLevel')}" th:text = "${radiovalue}">
                                        </label>
                                    </span>
    </td>
  </tr>
</table>
0 голосов
/ 07 мая 2019

Просто попробуйте с этим: 

input, label, td, span {
  display: flex;
  align-items: center;
}
<table>
<tr>
                <td>
                    Applicable on&nbsp;&nbsp;
                                <span th:each="checkboxvalue : ${appOnValues}">
                                    <input type = "checkbox" th:field = "*{channel}" th:value = "${checkboxvalue}" />
                                    <label th:for = "${#ids.prev('channel')}" th:text = "${checkboxvalue}">
                                    </label>&nbsp;&nbsp;
                                </span>
                </td>              
            </tr>
            <tr>
                <td>
                    Filter Level&nbsp;&nbsp;
                                    <span th:each="radiovalue : ${filterLevelValues}">
                                        <input type = "radio" th:field = "*{filterLevel}" th:value = "${radiovalue}" />
                                        <label th:for = "${#ids.prev('filterLevel')}" th:text = "${radiovalue}">
                                        </label>
                                    </span>
                </td>              
            </tr>
</table>
...