How Can Put ul List Within Outside div by Using CSS

Question

Hi i have this html markup below in my wordpress comment list enter image description here First Comment Second Comment First Reply For Comment Two Third Comment and this is my css code

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;
}

my question is that: how i can put the children class within container2 class? the children class is the reply comments i want when any people replay a comment directly show the replies within the parent comment.

Devin · Answer 1 · 2014-09-07T18:43:12.110

your markup is absolutely wrong, you need to use LI inside any OL or UL element, it's mandatory. So your markup should be like this:

<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>

I'm not sure what do you mean after that, if you want to NOT have paddings/margins, simply add:

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

otherwise, do the opposite (that is: add the margin and padding you want, although with proper markup you'll have some padding and margin by default)

EDIT

IN order to do this the way you want, with replies nested inside the comments, you need to do just a small change:

HTML goes like this now:

<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>

and CSS like this:

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

I'd leave the padding and margin as they're by default so you can see those replies at first sight, but of course depends on you. However, I'd recommend you add some kind of containing block to the inner elements of the li ancestor or you'll have problemss to style it. Like this:

    <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>

This way, if you want to style the comment, yet not the reply, you can simply target .comment_entry class using CSS

i used padding and margin zero but my second comment or every comment has the border and box-shadow i want put the replies within the border and box-shadow of second comment but by using your way the replies don't goes within the comment parent i want using float property to do this but i cna't — Shwan Namiq, Sep 06 '14 at 22:35
I don't understand what you want, please include an image of your desired behavior and your current CSS since it seems you'll need to correct that as well — Devin, Sep 06 '14 at 22:38
aaah, got it, you have to do things a bit differently, see edit in answer — Devin, Sep 07 '14 at 18:36
your CSS is correct, you have to change the markup. After that, is up to you since it depends on whatever you want/need. Also, remember this isn't a free coding service, but a place to learn, and I think that I have explained every step and approach very thoroughly, now you need to practice and learn to use all these tools — Devin, Sep 07 '14 at 19:46

How Can Put ul List Within Outside div by Using CSS

1 Answers1