css中的ul前面的文字怎么和li列表的第一行处于同一行

这两个不在同一行

.main .container .choose-area .choose-item .left{
    float: left;
    width: 60px;
    text-align: right;
    color: #999;
    margin: 1em 0;
    background: lime;
}
.main .container .choose-area .choose-item .right{
    text-decoration:none;
    width: 1050px;
    background: mediumvioletred;
    
}
.main .container .choose-area .choose-item .right li{
    float: left;
    list-style: none;
    background: midnightblue;
}

                <div class="choose-item clearfix">
                    <div class="left">类型：</div>
                    <div class="right">
                        <ul>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Quam.</a></li>
                            <li><a href="">Adipisci.</a></li>
                            <li><a href="">Officia!</a></li>
                            <li><a href="">Facere?</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Cupiditate!</a></li>
                            <li><a href="">Ratione!</a></li>
                            <li><a href="">Cumque!</a></li>
                            <li><a href="">Nostrum.</a></li>
                            <li><a href="">Voluptatum.</a></li>
                            <li><a href="">Et?</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Dicta!</a></li>
                            <li><a href="">Possimus!</a></li>
                            <li><a href="">Commodi?</a></li>
                            <li><a href="">Reprehenderit.</a></li>
                            <li><a href="">Suscipit!</a></li>
                            <li><a href="">Reprehenderit?</a></li>
                            <li><a href="">Non.</a></li>
                        </ul>
                    </div>    
                </div>
                <div class="choose-item clearfix">
                    <div class="left">区域：</div>
                    <div class="right">
                        <ul>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Quam.</a></li>
                            <li><a href="">Adipisci.</a></li>
                            <li><a href="">Officia!</a></li>
                            <li><a href="">Facere?</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Cupiditate!</a></li>
                            <li><a href="">Ratione!</a></li>
                            <li><a href="">Cumque!</a></li>
                            <li><a href="">Nostrum.</a></li>
                            <li><a href="">Voluptatum.</a></li>
                            <li><a href="">Et?</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Dicta!</a></li>
                            <li><a href="">Possimus!</a></li>
                            <li><a href="">Commodi?</a></li>
                            <li><a href="">Reprehenderit.</a></li>
                            <li><a href="">Suscipit!</a></li>
                            <li><a href="">Reprehenderit?</a></li>
                            <li><a href="">Non.</a></li>
                        </ul>
                    </div>    
                </div>
                <div class="choose-item clearfix">
                    <div class="left">年代：</div>
                    <div class="right">
                        <ul>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Quam.</a></li>
                            <li><a href="">Adipisci.</a></li>
                            <li><a href="">Officia!</a></li>
                            <li><a href="">Facere?</a></li>
                            <li><a href="">Quidem.</a></li>
                            <li><a href="">Cupiditate!</a></li>
                            <li><a href="">Ratione!</a></li>
                            <li><a href="">Cumque!</a></li>
                            <li><a href="">Nostrum.</a></li>
                            <li><a href="">Voluptatum.</a></li>
                            <li><a href="">Et?</a></li>
                            <li><a href="">Velit.</a></li>
                            <li><a href="">Dicta!</a></li>
                            <li><a href="">Possimus!</a></li>
                            <li><a href="">Commodi?</a></li>
                            <li><a href="">Reprehenderit.</a></li>
                            <li><a href="">Suscipit!</a></li>
                            <li><a href="">Reprehenderit?</a></li>
                            <li><a href="">Non.</a></li>
                        </ul>
                    </div>    
                </div>
 
            </div>