Блог

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

Как мне сделать так, чтобы два элемента в одной ячейке таблицы имели разное выравнивание текста?

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Я пытаюсь создать таблицу, содержащую список продуктов. Я хочу, чтобы в каждой строке была только одна ячейка с названием продукта, выровненным по левому краю. Но я также хочу добавить опцию редактирования (гиперссылку с именем «Редактировать»), выровненную по правому краю в той же строке, в той же ячейке таблицы. Поскольку <td> элементы по умолчанию выровнены по левому краю, я добавил атрибут class <a> в теги Edit и использовал его для оформления, но он по-прежнему выровнен по левому краю. Есть идеи, как это решить?

Это код CSS для класса опции редактирования:

 .editLink{
    text-align: right;  
    text-decoration: none;
    color: #555555;
    font-size: smaller;
    padding-right: 10px;
}

Ответ №1:

Вы можете использовать float для ссылки edit.

 table {
  border-collapse: collapse;
}

table td {
  border: 1px solid #000;
  width: 150px;
}

.editLink {
  float: right;
  text-decoration: none;
  color: #555555;
  font-size: smaller;
  padding-right: 10px;
}

.editLink::after {
  clear: both;
  content: "";
  display: table;
}  
 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <table>
      <tr>
        <td>Lorem <a href="#" class="editLink">Edit</a></td>
      </tr>
      <tr>
        <td>Lorem <a href="#" class="editLink">Edit</a></td>
      </tr>
      <tr>
        <td>Lorem <a href="#" class="editLink">Edit</a></td>
      </tr>
    </table>
  </body>
</html>

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

1. Это сработало, но я не понял цели этого фрагмента, не могли бы вы объяснить? .editLink::after { clear: both; content: ""; display: table; }

2. Это называется clearfix . Это взлом CSS для очистки плавающих значений и обеспечения правильного расположения следующих элементов.