I would like to display a list of links aligned with a dash. Type of such:

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

Each line here is a separate link. I tried to align in two ways (using Bootstrap ):

  1. Using mesh and classes col-md- *
  2. Using a table (without class table )

I don’t like the result, because the link is cut at the level of the first cell (i.e., instead of one link, you have to make three links on top of the whole row).

Secondly, this very dash does not go strictly in the center.

I tried to print only a dash, and add words with the help of before and after - the whole line is aligned to the center.

Patient reference

  • Script to twist? We transfer to the function an array of strings (for example, “lampshade — soundproof”), the function determines the longest string and its indexOf ('-'). Then, to all the lines except the longest and equal to it in length, the required number of spaces is added. I think the idea is more or less clear. - alvoro
  • one
    It is simple only if the font is monospaced (then the PRE tag). - Denis Khvorostin

2 answers 2

Leave the table as it is, remove all the <a> tags and the script to catch click on <tr data-href = "here can be your link"> (such as making <tr> a link)

  <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>

    Everything turned out to be simple:

    HTML:

    The centered dash on which we will align the list:

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

    One list item:

     <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'});

    Demo

    PS It remains to make so that when you change the width of the screen text shifted.