Как присвоить стили CSS разным составляющим одного тэга <ul>

olegipman · June 12, 2015

Доброго времени суток, друзья! Подскажите пожалуйста как мне поставить "Exemple" посередине между левой границей и "Home". Извините за неграмотное построение вопроса - я новичок...
Вот код:
HTML:
<Doctype HTML>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="new.css">
</head>
<body>
<nav role='navigation'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Our team</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
</html>
CSS:
*, *:before, *:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
}
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
}
nav ul{
list-style: none;
position: relative;
float: right;
margin-right: 100px;
display: inline-table;
}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

nav ul li:hover{background: rgba(0,0,0,.15);}
nav ul li:hover > ul{display: block;}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li a{
display: block;
padding: 30px 20px;
color: #222;
font-size: .9em;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul{
display: none;
background: #fff;
position: absolute;
top: 100%;
box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
}
nav ul ul li{float: none; position: relative;}
nav ul ul li a {
padding: 15px 30px;
border-bottom: 1px solid rgba(0,0,0,.05);
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}

BSandro · June 12, 2015

Пропиши float:left

olegipman · June 12, 2015

А где именно?

Просто как я понимаю CSS присваивает всему "nav ul" float:right...

А как "обратиться именно к нужной мне "Li",чтоб ей прописать float:left?

Пропиши float:left

Но спасибо за ответ... Хотя бы Вы откликнулись)))

klierik · June 12, 2015

Для того что бы получить ответ надо правильно задать вопрос. В подписи по сылке загляните

Aleksandr.L · June 12, 2015

Да тут не разберешься. Сделай нормальный тестовый пример. И где в твоей разметке этот "Example"?

BSandro · June 12, 2015

Делай так а то действительно не понятно

<Doctype HTML><html><head><meta charset='utf-8'><link rel="stylesheet" type="text/css" href="new.css"></head><body><nav role='navigation'><ul><li><a href="#">Home</a></li><li><a href="#">About</a><ul><li><a href="#">Our team</a></li><li><a href="#">History</a></li></ul></li><li><a href="#">Clients</a></li><li><a href="#">Contact Us</a></li></ul></nav></body></html>

и так CSS

*, *:before, *:after{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 0;margin: 0;font-family: 'Lato', sans-serif;}nav{position: fixed;top: 0;left: 0;width: 100%;background: #fff;box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);border: 1px solid rgba(0,0,0,.1);}nav ul{list-style: none;position: relative;float: right;margin-right: 100px;display: inline-table;}nav ul li{float: left;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}nav ul li:hover{background: rgba(0,0,0,.15);}nav ul li:hover > ul{display: block;}nav ul li{float: left;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}nav ul li a{display: block; padding: 30px 20px;color: #222; font-size: .9em;letter-spacing: 1px;text-decoration: none;text-transform: uppercase;}nav ul ul{display: none;background: #fff;position: absolute; top: 100%;box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);border: 1px solid rgba(0,0,0,.1);}nav ul ul li{float: none; position: relative;}nav ul ul li a {padding: 15px 30px; border-bottom: 1px solid rgba(0,0,0,.05);}nav ul ul ul {position: absolute; left: 100%; top:0;}

А где именно? Просто как я понимаю CSS присваивает всему "nav ul" float:right... А как "обратиться именно к нужной мне "Li",чтоб ей прописать float:left?

Ты не весь код дал...

Я тоже в упор не вижу EXAMPLE

(P.S к EXAMPLE к этому классу, что у тебя там картинка похоже)

CSS кинь полный и html

А обычно к класу example к его заветному css просто пропиши float:left

где ты прописывал, margin:0 0; для этого example там поставь то что выше на строку

olegipman · June 12, 2015

Извините еще раз пожалуйста за мою некомпетентность...

Exemple я не писал в коде-думал Вы мне подскажите как и куда его вставить...

CSS применяются ко всем моим Li в теге Ul и если я добавлю туда ееще один Li и там напишу exemple мне нужно обратиться в CSS отдельно к нему,чтоб задать Float: left

Вот в этом и вопрос как отдельно к нему отдельный стиль сделать...

<ul>
<li><a href="#">exemple</a></li> <-- Вот к нему как сделать отдельный стиль,чтоб все остальные были справа,а этот "li" слева...
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Our team</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

BSandro · June 13, 2015

<li><a href="#"><div class="example">exemple</div></a></li>

в css

.example { float:left;}

olegipman · June 13, 2015

<li><a href="#"><div class="example">exemple</div></a></li>
в css
.example { float:left;}
Спасибо большое, BSandro!) Я это сделал почти так...)))
<li><a class="exemple" href="#">exemple</a></li>
Но теперь другое)))
Мне нужно чтоб она была не по левой стороне,а именно посередине между границей и "Home"... Возможно такое?

Как правильно эту тему обозвать,чтоб на будущее ребята посмотреть могли?

Или вообще лучше удалить?

Кстати у меня " float: left; " не работает((

На том же месте осталось...

BSandro · June 13, 2015

<li><a href="#"><div class="example">exemple</div></a></li>
в css
.example { float:left;}
Спасибо большое, BSandro!) Я это сделал почти так...)))
<li><a class="exemple" href="#">exemple</a></li>
Но теперь другое)))
Мне нужно чтоб она была не по левой стороне,а именно посередине между границей и "Home"... Возможно такое?
Как правильно эту тему обозвать,чтоб на будущее ребята посмотреть могли?
Или вообще лучше удалить?
Кстати у меня " float: left; " не работает((
На том же месте осталось...

http://jsfiddle.net/сюда залей полностью все

Так как я не совсем тебя понял, ты применяешь к EXAMPLE стиль такой же как у меню при наведений и хочешь что бы он был слева, я так понял это у тебя логотип, зачем тебе только делать его в <ul><li></li></ul>

Понять не могу...

Сделай отдельный див

<div class ="example">EXAMPLE</div>

Хочешь сделать его как ссылкой пожалуйста

<div class ="example"><a href="/">EXAMPLE</a></div>

За <ul> выведи его и будет флоат все работать как надо да и пойдее там он даже не нужен будет, он сам должен быть слева там надо будет ему прописать только margin

Edited June 13, 2015 by BSandro

Sign In

Как присвоить стили CSS разным составляющим одного тэга <ul>

Question

olegipman

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

BSandro

Link to comment

Share on other sites

olegipman

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Aleksandr.L

Link to comment

Share on other sites

BSandro

Link to comment

Share on other sites

olegipman

Link to comment

Share on other sites

BSandro

Link to comment

Share on other sites

olegipman

Link to comment

Share on other sites

BSandro

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information