如何使第一行溢出的文字在第二行自动左对齐呢？给溢出的文字单独添加左边距好像有点麻烦。。

Question

<div class="sub-menu sub-menu-hide">

<div class="inner-box">

<div class="sub-inner-box">

<div class="sub-row">

<span class="hh">电器</span>

<span class="ccc">|</span>

<a href="#">手机</a>

<a href="#">对讲机</a>

<a href="#">以旧换新</a>

<a href="#">手机维修</a>

</div>

<div class="sub-row">

<span class="hh">冰箱</span>

<span class="ccc">|</span>

<a href="#">充话费/流量</a>

<a href="#">170选号</a>

<a href="#">合约机</a>

<a href="#">办套餐</a>

<a href="#">选号码</a>

<a href="#">固话宽带</a>

<a href="#">京东通讯</a>

<a href="#">中国移动</a>

<a href="#">中国联通</a>

<a href="#" class="le">中国电信</a>

<a href="#">中国联通</a>

</div>

.sub-menu{

position: absolute;

width: 748px;

height: 518px;

background: #fff;

left: 200px;

top: 44px;

border: 1px solid #ccc;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);

z-index: 333;

}

.inner-box{

width: 100%;

height: 100%;

}

.sub-inner-box{

width: 650px;

margin-top: 20px;

margin-left: 49px;

/*display: none;*/

}

.sub-menu .sub-row .hh{

color: black;

font-size: 14px;

}

.sub-menu .sub-row .ccc{

color: #ccc;

margin: 0 10px;

}

.sub-row{

margin-top: 20px;

}

.sub-menu .sub-row a{

margin-right: 8px;

}

.sub-menu .sub-row a:hover{

color: red;

}

Answer 1

可以选择换一种方式去解决，把左边标题放到一个div，右边内容放到一个div，各自定义width，然后浮动，就不会出现你这种问题了