Как избавиться от ненужного места в меню вкладок?

Question

Я использую asp.net mvc и работаю над меню вкладок, которое отображает нежелательное пространство между каждой вкладкой. Это происходит только тогда, когда у меня есть каждый тег изображения в отдельной строке, а не в одном.

Верхние изображения находятся на отдельной строке, что является причиной нежелательного пространства:

        <img src="/Content/Images/Reports_white.png"/>
        <img src="/Content/Images/Audit_white.png"/>
        <img src="/Content/Images/Messages_white.png"/>
        <img src="/Content/Images/Admin_white.png"/>  

в зависимости от желаемого эффекта в нижней половине изображения:

        <img src="/Content/Images/Reports_white.png"/><img src="/Content/Images/Audit_white.png"/> ...

Как я могу избавиться от этого места, не удерживая их все в одной строке?

Answer 1

Я бы содержал изображения ваших вкладок в неупорядоченном списке, например:

CSS:

ul.tabs
{
list-style:none;
padding:0px;
margin:0px;
}

ul.tabs li
{
padding:0px;
margin:0px;
float:left;
}

HTML:

<ul class="tabs">
<li><img src="/Content/Images/Reports_white.png"/></li>
<li><img src="/Content/Images/Audit_white.png"/></li>
<li><img src="/Content/Images/Messages_white.png"/></li>
<li><img src="/Content/Images/Admin_white.png"/></li>
</ul>

Таким образом, вы можете контролировать интервал, используя отступы или поля.

Answer 2

Поскольку вы, вероятно, захотите, чтобы вкладки были кликабельными, вам нужно добавить некоторые элементы DIV, например, вокруг изображений. Убедитесь, что у этих элементов нет полей, и у вас не должно быть пробелов между элементами div в источнике. Нет проблем.

    <div><img src="/Content/Images/Reports_white.png"/></div>
    <div><img src="/Content/Images/Audit_white.png"/></div>
    <div><img src="/Content/Images/Messages_white.png"/></div>
    <div><img src="/Content/Images/Admin_white.png"/></div>

Answer 3

одна техника должна сделать

    <img src="/Content/Images/Reports_white.png"
    /><img src="/Content/Images/Audit_white.png"
    /><img src="/Content/Images/Messages_white.png"
    /><img src="/Content/Images/Admin_white.png"/>

Answer 4

Краткий ответ: уберите пробелы между тегами img и убедитесь, что у них нет полей.

Если вы не хотите беспокоиться о наличии пробелов в HTML, найдите время, чтобы сделать их float:left, содержащимися в div (overflow:hidden получит правильную высоту).

Answer 5

Любой пробел между тегами, например новая строка, интерпретируется как пробел. Это действительно влияет только на встроенные элементы, которые элементы, поэтому ваша проблема.

Вы также можете попробовать добавить float: left к элементам, которые будут располагать их горизонтально без пробелов. Предположительно, вы на самом деле реализуете их как гиперссылки, нам нужно увидеть точную разметку, чтобы предложить конкретное решение для нее.