2

Хотелось бы вывести список ссылок с выравниванием по тире. Типа такого:

            а — звуконепроницаемый
звукооператор — окаменеть
           па — ящур

Каждая строка здесь - это отдельная ссылка. Пробовал выровнять двумя способами (использую Bootstrap):

  1. Используя сетку и классы col-md-*
  2. Используя таблицу (без класса table)

Результат не нравится, поскольку ссылка режется на уровне первой ячейки (т.е. вместо одной ссылки поверх всего ряда приходится делать три ссылки).

Во-вторых, это самое тире не идет строго по центру.

Пробовал выводить только тире, а слова добавлять при помощи before и after - выравнивается по центру вся строка целиком.

Ссылка на пациента

2
  • Скриптом извернутся? Передаем в функцию массив строк (к примеру "абажур—звуконепроницаемый"), функция определяет самую длинную строку и ее indexOf('-'). Затем, ко всем строкам, кроме самой длинной и равным ей по длине, добавляется необходимое число пробелов. Я думаю идея более-менее ясна.
    – alvoro
    16 мая 2014 в 12:50
  • 1
    Это просто только если шрифт моноширинный (тогда уж тег PRE). 16 мая 2014 в 12:55

2 ответа 2

1

Оставить таблицу как есть, удалить все теги <a> и скриптом отлавливать клик на <tr data-href = "тут может быть ваша ссылка"> (типа делаем из <tr> ссылку)

    <table align='center'>
          <tr data-href = "/kudaNado">
        <td class='text-right'><h4>абажур</h4></td>
        <td><h4>&nbsp;&mdash;&nbsp;</h4></td>
        <td class='text-left'><h4>звуконепроницаемый</h4></td>
      </tr>
    </table>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
    $('tr').click(function (event) {
        var $tr = $(event.currentTarget),
        href = $tr.attr('data-href');
        location.href = href;
    });
  </script>
</body>
</html>
1

Всё оказалось просто:

HTML:

Отцентрованное тире, по которому будем выравнивать список:

<div class="row">
    <h4 class="text-center centered">
        <span class="mdash">—</span>
    </h4>
</div>

Один элемент списка:

<div class="row">
    <h4 class="text-center">
        <span class="links">
            <a href="/1 /">звукооператор <span class="mdash">—</span> окаменеть</a>
        </span>
    </h4>
</div>

jQuery:

/* Определяем позицию отцентрованного тире */
var p = $('.centered .mdash').position();

/* Скрываем вспомогательный элемент */
$('.centered .mdash').hide();

/* Проходим по всем ссылкам */
$('.links').each(function(){
    /* Находим левую границу ссылки */
    var ip = $(this).position();

    /* Находим левую тире в ссылке */
    var cp = $(this).children('a').children('.mdash').position();

    /* Находим сдвиг */
    var pos = ip.left + p.left - cp.left;

    /* Выравниваем ссылки */
    $(this).parent().css({position: 'relative', padding: 5});
    $(this).css({left: pos, position:'absolute'});

Демо

P.S. Осталось сделать так, чтобы при изменении ширины экрана текст сдвигался.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.