html - 导航要左对齐

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代码:

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

fiddle 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