Question

我希望我的导航在类aside的div内对齐。我希望它与我的div中的段落aside一样对齐。但导航更靠近右侧。任何人都可以帮我解决一下吗？

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:100%;
    }

.sidebar li{ width:100%;list-style-type: none;border-bottom:1px white solid;}
.sidebar a:link, a:visited {
    display: block;
    font-weight: bold;
    color: black;
    background-color: royalblue;
  /*    width: 120px;  */

    text-align: center;
    padding: 4px;
    text-decoration: none;
    }
.sidebar a:hover, a:active {
    background-color: #7A991A;
    color:black;
} 

.aside
    {
         float: left; 
         /* overflow:hidden; */
        width: 20%;
        margin-bottom: 1em;
        border:thin royalblue solid;
        background-color:grey;

    }

HTML code：

<div class="aside">
             <div><p>paragraph paragraph paragraph paragraph paragraph paragraphp aragrap hparag raph paragraph</p></div> 

                <ul class="sidebar">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Services</a></li>
                    <li><a href="solar.html">Solar</a></li>
                    <li><a href="#">Hendrer</a></li>
                        </ul>


                </div>

小提琴http://jsfiddle.net/z0bwuhqr/

Answer 1

请尝试此

添加以下样式。

.aside
    {
        width: 40%;
        margin-bottom: 1em;
        border:thin royalblue solid;
        background-color:grey;

    }
.test{
    width:50%;
    float:left;    
}
.clearFix{
    clear:both;
}

HTML：

<div class="aside">

    <div class="test">
        <ul class="sidebar" style="padding-left:5px;">
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="solar.html">Solar</a></li>
            <li><a href="#">Hendrer</a></li>
        </ul>

    </div> 
    <div class="test"><p>paragraph paragraph paragraph paragraph paragraph paragraphp aragrap hparag raph paragraph</p></div>
    <div class="clearFix"></div>
</div>

DEMO

Answer 2

问题在于你的UL声明在CSS中进行更改

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:100%;
    }

编辑此内容

ul.sidebar  {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width:100%;
    }

请参阅更新的小提琴http://jsfiddle.net/z0bwuhqr/2/

导航想要保持对齐

2 个答案: