Создание элементов списка элементов независимо друг от друга

У меня есть ul с несколькими элементами списка внутри, состоящими из h3s и lis с идентификатором класса «close».Создание элементов списка элементов независимо друг от друга

У меня есть стиль наведения, который расширяет расстояние между буквами на h3s, проблема в том, что элементы с близким классом расширяются. Я попробовал несколько разных вещей, прежде чем добавлять класс, например n-й дочерний элемент и т. Д. (Все они видны в коде). Я бы хотел, чтобы закрытые классы lis оставались одинаковыми, когда h3s расширяются.

Любая помощь приветствуется.

jsfiddle здесь: https://jsfiddle.net/snowwhyte/7eLmarnp/7/#&togetherjs=Uq5j49dUG0

CSS:

a {text-decoration:none; 
} 
li {list-style:none; 
} 
} 
#openClose { 
    position:absolute; 
    top:200px; 
    margin-top:55px; 
} 

#openClose li{ 
    list-style-type:none; 
    display:block; 
    padding-right:-50px; 
} 

#openClose li:nth-child(2n+2){ 
    margin:30px 0 100px 0; 
    background-color:#000; 
    border:2px #fff solid; 
    text-align:center; 
    letter-spacing:1rem; 
    padding:10px 0 10px 0; 
} 
#openClose li:nth-child(2n+2):hover{ 
letter-spacing:-0.1rem; 
transition:.3s; 
} 

#openClose li a h3{ 
font-family:Helvetica, Gotham, Helvetica, Arial, sans-serif; 
color:#73a6c2; 
} 

.close{ 
} 

#openClose li a h3:hover{color:#fff; 
text-shadow:2px 1px 2px #000; 
transition:.2s; 
letter-spacing:1rem; 
} 

a:visited { text-decoration: none; color:#B8CEDB; } 
a:hover { text-decoration: none; color:#D7D8D8; } 
a:focus { text-decoration: none; color:#fff;

}

HTML:

<section id="openClose"> 
<ul> 
<li><a href="#wrapper"><h3>Tool Descriptions</h3></a></li> 
<li class="close"><a href="#">Close</a></li> 
<li><a href="#wrapper2"><h3>Key tools</h3></a></li> 
<li class="close"><a href="#">Close</a></li> 
<li><a href="#wrapper3"><h3>Adjustment Layers & <br> 
Blending modes</h3></a></li> 
<li class="close"><a href="#">Close</a></li> 
</ul></section>

источник

2016-03-12 MKay

Вы можете просто добавить другой класс или идентификатор для каждого элемента списка и стиля каждый соответственно. –

Проблема в том, что размер li, содержащий тег 'h3', расширяется с помощью' h3', который затем расширяет 'ul', чтобы соответствовать ему, и, в свою очередь, все дочерние элементы уровня блока' ul' , Можем ли мы иметь некоторый контекст относительно того, какой целью будет эффект, который вы пытаетесь достичь? Там может быть намного лучший способ обойти это. – shamsup

Дело в том, что у вас нет какого-либо элемента с определенным ширина, поэтому каждый элемент имеет ширину самого большого элемента.

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

Можно определить ширину починки на одного из родителей, как ул, например, и добавить white-space: nowrap свойство к h3 (см the fiddle):

ul { 
    width: 200px; 
} 
#openClose li a h3{ 
    white-space: nowrap; 
}

Вы также можете установить ширину починки на вашем Ли с кнопкой закрытия (см the fiddle):

#openClose li:nth-child(2n+2){ 
    width: 200px; 
}

источник

2016-03-12 23:41:29 qbeauperin

Вот моя попытка. Как вы видите, я изменил немного коду, соединяющую некоторые вещи и убрать немного, но суть в width свойства .close

https://jsfiddle.net/7eLmarnp/12/

источник

2016-03-12 23:46:06 aluknot

Создание элементов списка элементов независимо друг от друга

ответ

Смежные вопросы