Как поместить список ul внутри внешнего div с помощью CSS

Привет, у меня есть эта html-разметка ниже в моем списке комментариев WordPress введите описание изображения здесьПервый комментарий Второй комментарий Первый ответ на комментарий Два Третьих Комментария и это мой код css

this is my css code 

ol.commentslist,
ol.commentslist li article header ul,
ol.commentslist ul.children {
list-style: none;
}
ol.commentslist h4 {
background: #272322;
padding: .5em 5px;
color: #fff;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 3px;
margin-right: 40px;
}
ol.commentslist figure img {
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px;
border-radius: 5px;
}
ol.commentslist li article {
background: #FFF;
padding: 10px;
display: block;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
.border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin-bottom: 10px;
border-color: rgb(238, 238, 238) rgb(221, 221, 221) rgb(187, 187, 187);
border-width: 1px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px;
position: static;
visibility: visible;
}
ol.commentslist li article header {
border-bottom: 1px solid rgba(0, 0, 0, 0.14902);
padding-bottom: 10px;
}
ol.commentslist li article p {
padding-top: 10px;
text-align: justify;
}
ol.commentslist li article header ul {
padding-left: 0;
}
ol.commentslist li article header ul li {
display: inline-block;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: bold;
text-decoration: underline;
}
ol.commentslist li article header ul li:last-child {
float: right;
}
ol.commentslist li article a.comment-reply-link {
float: right;
background: #F2F2F2;
padding: 7px;
text-decoration: underline;
border: 1px solid #d7d7d7;
color: #777;
position: relative;
bottom: -10px;
right: -10px;
}

ol.commentslist ul {
padding-left: 0;
}
ol.commentslist ul.children li {
margin-top: -10px;
}
ol.commentslist ul.children li article.even {
background: #FAFAFA;
}
ol.commentslist ul.children li article.odd {
background: #d7d7d7;
}

мой вопрос заключается в следующем: как я могу поместить класс children в класс container2? дочерний класс - это комментарии к ответам, которые я хочу, когда какие-либо люди воспроизводят комментарий, напрямую отображают ответы в родительском комментарии.


wordpress comments reply
person Shwan Namiq    schedule 06.09.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

ваша разметка абсолютно неверна, вам нужно использовать LI внутри любого элемента OL или UL, это обязательно. Итак, ваша разметка должна быть такой:

<ol class='commentlist'>
    <li class='container1'>First Comment</li>
    <li class='container2'>Second Comment</li>
    <li class='children'>
        <ul>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
        </ul>
    </li>
    <li class='container3'>Third Comment</li>
</ol>

Я не уверен, что вы имеете в виду после этого, если вы не хотите иметь отступы/поля, просто добавьте:

.children ul{padding:0; margin:0}

в противном случае сделайте обратное (то есть: добавьте нужные поля и отступы, хотя при правильной разметке у вас будут некоторые отступы и поля по умолчанию)

ИЗМЕНИТЬ

Чтобы сделать это так, как вы хотите, с ответами, вложенными в комментарии, вам нужно сделать небольшое изменение:

Теперь HTML выглядит так:

<ol class='commentlist'>
    <li class='container1'>First Comment</li>
    <li class='container2'>Second Comment
        <ul class='children'>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
        </ul>
    </li>
    <li class='container3'>Third Comment</li>
</ol>

и CSS, как это:

ul.children{/* whatever style you need */}

Я бы оставил отступы и поля по умолчанию, чтобы вы могли видеть эти ответы с первого взгляда, но, конечно, зависит от вас. Тем не менее, я бы порекомендовал вам добавить какой-нибудь содержащий блок во внутренние элементы предка li, иначе у вас возникнут проблемы со стилем. Как это:

    <li class='container2'><div class="comment_entry">Second Comment</div>
        <ul class='children'>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
        </ul>
    </li>

Таким образом, если вы хотите стилизовать комментарий, но не ответ, вы можете просто указать класс .comment_entry с помощью CSS.

person Devin    schedule 06.09.2014
comment
я использовал отступы и нулевое поле, но мой второй комментарий или каждый комментарий имеет рамку и тень блока, я хочу поместить ответы в границу и тень блока второго комментария, но, используя ваш способ, ответы не входят в родительский комментарий я хочу использовать свойство float для этого, но я не могу - person Shwan Namiq; 07.09.2014
comment
Я не понимаю, чего вы хотите, пожалуйста, включите изображение желаемого поведения и ваш текущий CSS, так как кажется, что вам также нужно будет исправить это. - person Devin; 07.09.2014
comment
ааа, понял, нужно делать немного по-другому, см. редактирование в ответе - person Devin; 07.09.2014
comment
ваш CSS правильный, вы должны изменить разметку. После этого решать вам, так как это зависит от того, что вы хотите/нужно. Кроме того, помните, что это не бесплатная служба кодирования, а место для обучения, и я думаю, что я очень подробно объяснил каждый шаг и подход, теперь вам нужно попрактиковаться и научиться использовать все эти инструменты. - person Devin; 07.09.2014