Я пытаюсь создать панель навигации, где ссылки разделены только небольшим пространством на одной строке. Когда я пытаюсь реализовать это, они идут на две строки с большими пробелами и не могут изменить это.Расстояние между строками Navbar
Из ваших комментариев и фотографий вы указали я думаю, что это то, что вы ищете.
/* Reset Browser Default Styles
-------------------------------------- */
* { margin:0; padding:0 }
/* General Styles
-------------------------------------- */
body {
font: 12px/1.2 Verdana, serif;
}
header {
background: #5D2C2C;
padding: 10px;
/* lay out content from right to left */
text-align: right;
}
a {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Nav Styles
-------------------------------------- */
nav > * {
display: inline-block;
/* nav text should be left to right */
text-align: left;
}
nav menu {
/* dropdown menus need to be on top of page content */
position: absolute;
z-index: 1;
/* make them look nice */
padding: 10px;
background: #5D2C2C;
}
/* Show/hide the dropdown menu */
nav menu a {
display: block;
}
nav a + menu {
display: none;
}
nav a:hover + menu,
nav a + menu:hover {
display: block;
}<header>
<nav>
<a href="#introduction">Introduction</a>
<a href="#history">History</a>
<a href="#national_flags">National Flags</a>
<span>
<a href="#maritime_signal_flags">International Maritime Signal Flags</a>
<menu>
<a href="#maritime_signal_letters">Maritime Signal: Letters</a>
<a href="#maritime_signal_numbers">Maritime Signal: Numbers</a>
</menu>
</span>
</nav>
</header>редактируемые демо:http://jsbin.com/xojomi/2
Хорошее решение, которое включает выпадающий/вложенный ul в исходном коде. – Talkingrock
Я пытаюсь создать панель навигации, где ссылки разделены только небольшим пространством на одной строке.
Не применяйте CSS.
Например:
<a href="">Link1</a>
<a href="">Link2</a>
<a href="">Link3</a>
<a href="">Link4</a>Я пытаюсь сделать это в своем коде, но я не могу заставить его работать, поскольку мне также нужно, чтобы у него был раскрывающийся ящик и т. Д. Можете ли вы изменить мой JS, чтобы я мог видеть? Спасибо – NewCoder2015
Удалить ** все ** вашего CSS. Медленно добавьте его обратно, пока не найдете свою проблему. К сожалению, для выпадающих списков нет элемента HTML, поэтому добавление раскрывающегося списка на ваш навигатор сделает вещи немного сложными. – Zaqx
Этот вопрос не достаточно конкретны. Предоставьте изображение того, что вы пытаетесь достичь, и/или приведенный пример кода, который наглядно иллюстрирует проблему. – Zaqx
Изображение помогает. К вашему последнему комментарию, код недостаточно сокращен. Если ваша проблема заключается в том, что ссылки не появляются рядом, вы должны иметь пример кода с только ссылками в нем и только CSS, который непосредственно вызывает проблему. – Zaqx
в меньшем экране: http: //imgur.com/eanZJsy , поэтому я предположил, что когда я буду плавать влево, это сделает их горизонтальными, но это происходит: http: //imgur.com/SLPbpUK – NewCoder2015