下記のようなHTMLをliのはじめの二つを横並びにし、残りのliは次の行で並べるようにするにはどんな方法が良いでしょうか？

Question

下記のようなHTMLをliのはじめの二つを横並びにし、残りのliは次の行で並べるようにするにはどんな方法が良いでしょうか？
ul直下にdivを置けないのでdispay:table;では全部を並べることしかできないですよね。

こんなイメージ（■はli）
■ ■
■ ■ ■

<ul class="address">
					<li><a class="address--tel animation-hover action-hover" href="tel:[phone]">TEL&nbsp;080-1111-1111</a></li>
					<li><a class="address--mail animation-hover action-hover" href="mailto:[e-mail]">MAIL&nbsp;[e-mail]</a></li>	
					<li class="social-btn">
						<a class='symbol animation-hover action-hover' href="l" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a>
	                <li class="social-btn">
	                	<a class='symbol animation-hover action-hover' href="h" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe027;'></a>
	            	</li>	
	                <li class="social-btn">
	                	<a class='symbol animation-hover action-hover' href="h'></a>
	                </li>
				</ul>

Answer 1

liをfloatで回り込みさせて、２番目のliのfloatのみを解除すると、３番目からは次の行から回り込みをします。

li{
 float : left;
}

li:nth-child(2){
 float : none;
}

Comments

[退会済みユーザー]

ありがとうございます。
全部フロートすると確かにできますね。

Answer 2

こういうことですか？

li{
  float:left;
}
li + li{
  float:none;
}
li + li + li{
  float:left;
}

Comments

[退会済みユーザー]

ありがとうございます。
やっぱりフローとが一番ですかね。