Как я могу получить пробелы между тегами, чтобы не отображаться? - PullRequest
Новая
       11

Как я могу получить пробелы между тегами, чтобы не отображаться?

5 голосов
/ 07 февраля 2009

Я пытаюсь создать меню, используя теги привязки, и они должны располагаться рядом друг с другом, чтобы связанные ссылки могли быть связаны с рамкой. Вот пример кода: 

<html>
<head>
    <style type="text/css">
        a {
            border: 1px solid #939393;
            margin: 15px;
            padding: 8px;
        }
        a:hover {
            border-color: #111;
        }
        a.collapse-left {
            border-left-width: 0px;
            margin-left: 0px;
        }
        a.collapse-right {
            border-right-width: 0px;
            margin-right: 0px;
        }



    </style>
</head>
<body>
    <div class="body">
        <a href="#" class="collapse-right primary">This is</a>
        <a href="#" class="collapse-right collapse-left click">A group</a>
        <a href="#" class="collapse-left hover">Of Three</a>

        <a href="#" class="">I am by myself</a>

        <a href="#" class="collapse-right">We are</a>
        <a href="#" class="collapse-left">a pair</a>

    </div>
</body>
</html>

Между кнопками, сгруппированными вместе, есть пробел. Это вызвано разрывом строки между тегами <a>. Эти разрывы строк можно удалить, и проблема исчезнет, ​​но код будет намного менее читабельным.

Можно ли сохранить разрывы строк, но не отображать пробелы?

Ответы [ 7 ]

6 голосов
/ 07 февраля 2009

Вы должны превратить блоки в блоки, изменив свой CSS для <a> на следующее: 

a {
    border: 1px solid #939393;
    margin: 15px;
    padding: 8px;
    display: block;
    float: left;
}
3 голосов
/ 07 февраля 2009

Не идеально, но работает и лучше, чем помещать его в одну строку: 

<a href="#">First link</a><!--
--><a href="#">Second link</a><!--
--><a href="#">Third link</a>

Обратите внимание, что обычно я выполняю навигацию по сайту с разметкой списка, чтобы избежать подобных проблем, но решение, приведенное выше, решает общие проблемы с пробелами.

2 голосов
/ 07 февраля 2009

Я думаю, что встроенные элементы (span, em, a) обтекают текстовые пробелы вокруг них, а элементы блочного уровня - нет (P, h1, div).

Для создания навигационных панелей я обычно заключаю ссылки в элементы списка неупорядоченного списка и даю li float:left, что приводит к display:block, а затем они обычно располагаются друг против друга.

1 голос
/ 07 февраля 2009

У меня была такая же проблема со списками. Решение, которое я нашел (и оно совершенно верно), заключалось в том, чтобы поставить закрывающую скобку перед началом следующего, и я думаю, что вы можете сделать это и с элементом a : 

    <a href="#" class="collapse-right primary">This is</a
    ><a href="#" class="collapse-right collapse-left click">A group</a
    ><a href="#" class="collapse-left hover">Of Three</a>
1 голос
/ 07 февраля 2009

Нет, промежутки между якорями объединяются в один, и они отображаются между вашими якорями, так как все они находятся на «линии» вместе (даже если линия занимает несколько строк в источнике). Лучший способ сделать это - использовать неупорядоченный список в стиле. Тем не менее, в IE (я думаю, что только IE6, но, возможно, IE7 тоже), вы все еще получаете этот пробел с элементами списка.

0 голосов
/ 07 февраля 2009

Использование диапазона, содержащего ваши наборы ссылок, поможет уменьшить необходимость размещения имен классов на якорях (не кросс-браузер в этом наведении не работает в IE6, но приемлемо для IMO): - 

<html>
<head>
    <style type="text/css">

        span.linkSet { border: 1px solid #939393; margin: 15px; padding: 8px }
        span.linkSet:hover {border-color: #111; }

    </style>
</head>
<body>
    <div class="body">

        <span class="linkSet">
            <a href="#" >This is</a
            ><a href="#" >A group</a
            ><a href="#" >Of Three</a>
        </span>

        <span class="linkSet">
            <a href="#">I am by myself</a>
        </span>

        <span class="linkSet">
            <a href="#" >We are</a
            ><a href="#" >a pair</a>
        </span>

    </div>
</body>
</html>
0 голосов
/ 07 февраля 2009 
 <div class="body">
    <a href="#" class="collapse-right primary">This is</a
    ><a href="#" class="collapse-right collapse-left click">A group</a
    ><a href="#" class="collapse-left hover">Of Three</a>

    <!--alternate way.-->
    <a href="#" class="">I am by myself</a><
    a href="#" class="collapse-right">We are</a><
    a href="#" class="collapse-left">a pair</a>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...