Почему между этими вкладками есть пробел? - PullRequest
Новая
       0

Почему между этими вкладками есть пробел?

1 голос
/ 01 сентября 2011

Я попытался сделать вкладки с помощью CSS3 и получил следующий результат: enter image description here

Со следующим кодом: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
nav{
    width:1000px;
    padding-top:30px;
    margin:0 auto 0 auto;
}
nav ul.topnav{
    margin:0;
    padding:0;
    width:100%;
    position:relative;
}
nav ul.topnav li{
    display:inline-block;
    width:173px;
    height:18px;
    padding:10px;
    font-size:15px;
    margin:0;
    box-shadow:inset 0 0 5px 5px #E7E4E9;
    border:1px solid #8C8293;
    border-radius:15px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    color:#666666;
    text-align:center;
}
</style>
<title></title>
</head>
<body>
<nav>
<ul class="topnav">
<li>Overview</li>
<li>Alarms</li>
<li class="selected">Config</li>
<li>Logs</li>
<li>Command Line</li>
</ul>
</nav>
</body>
</html>

Как я могу удалить это пространство между вкладками (как показано на рисунке)? PS. Кажется, это пробел, потому что в конце списка у меня тоже есть этот пробел.

Ответы [ 5 ]

6 голосов
/ 01 сентября 2011

Пробелы на самом деле являются новыми строками (пробелами) между вашими <li> тегами. Поскольку вы создали встроенные блоки <li> s, пробельные символы обрабатываются как текст в той же строке, что и ваши встроенные блоки, что приводит к их разнесению.

Вы можете либо удалить символы новой строки из своего HTML-кода, либо использовать <li> s вместо display: inline-block: 

nav ul.topnav li {
    float: left;
    ...
}
2 голосов
/ 01 сентября 2011

Попробуйте использовать li s. Или вы можете избавиться от пробелов в разметке (между <li> и <li>). Это происходит, когда вы используете display:inline-block.

2 голосов
/ 01 сентября 2011

Это возврат каретки в разметке HTML.

Смотрите здесь: http://jsfiddle.net/8D26e/6/.

0 голосов
/ 01 сентября 2011

Попробуйте использовать CSS reset , прежде чем что-либо стилизовать.

К вашему сведению: файл сброса CSS - это файл, который обнуляет все стили по умолчанию, заданные браузерами для элементов HTML. Поскольку браузеры отличаются по стилю по умолчанию, дизайнеры обычно считают хорошей практикой сначала обнулять стили по умолчанию, применяя некоторый вид сброса CSS, а затем применяя свои собственные стили.

0 голосов
/ 01 сентября 2011

Использование Google Chrome ispector

http://www.threetipsaday.com/2008/12/debug-inspect-google-chrome-inspector/

вы можете изменить на лету параметры css и определить, какой из них создает пробел между вкладками.

В любом случае, я думаю, вам просто нужно изменить отступ: 10px; (ul.topnav li) на padding: 0px; (ul.topnav li)

Привет

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

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

...