html li ul 横排_css html 4图横向排列 自适应宽度，多图横向排列 li横向 li自适应...

直接把苹果官网的抠出来给大家了，拿去happy吧!

，先上效果图：

横屏一排的效果：

把浏览器拉小的效果：

激动的代码来了：

html>

Apple (中国) - 官方网站

• class="promo promo-holiday-music"

  href="/cn/shop/gifts/music"

  data-promo-id="holiday-music"

  data-analytics-click="prop3:gift_guide,prefix:p"

  data-analytics-title="promo-gift-guide">

  表达心意，也是门艺术。发现美妙音乐好礼。

• class="promo promo-airpods"

  href="/cn/airpods/"

  data-analytics-click="prop3:airpods,prefix:p"

  data-analytics-title="promo-airpods">

  AirPods 无线，无繁琐，只有妙不可言。

• data-promo-id="os-1"

  class="promo promo-ipad-pro"

  href="/cn/ipad-pro/"

  data-analytics-click="prop3:ipad-pro,prefix:p"

  data-analytics-title="promo-ipad-pro">

  iPad Pro。你的下一台电脑。

• class="promo promo-iphone-upgrade"

  href="/cn/shop/goto/iphone/iphone_upgrade_program"

  data-analytics-click="prop3:iphone_upgrade,prefix:p"

  data-analytics-title="promo-iphone_upgrade">

  iPhone 年年焕新计划 每年都有一部新 iPhone，并享受 AppleCare+ 全方位服务计划。

下面是CSS文件：ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,hgroup,p,blockquote,figure,form,fieldset,input,legend,pre,abbr,button {

margin:0;

padding:0

}

article,aside,footer,header,nav,main,section,summary,details,hgroup,figure,figcaption {

display:block

}

li li {

font-size:1em

}

ul,ol {

margin:1em 0 1em 1.11111em

}

ul ul,ul ol,ol ul,ol ol {

margin-top:0;

margin-bottom:0

}

nav ul,nav ol {

list-style:none;

margin:0

}

.row {

position:relative;

z-index:1

}

.row:before,.row:after {

content:' ';

display:table

}

.row:after {

clear:both

}

.column {

box-sizing:border-box;

position:relative;

z-index:1;

margin:0;

padding:0;

float:left;

min-height:2px

}

.medium-6 {

width:50%

}

.small-12 {

width:100%

}

.large-3 {

width:25%

}

html.ie8 .large-3 {

width:24.975%

}

/* 宽度自适应Start */

@media only screen and (min-width: 1442px) {

.xlarge-offset-0 {

margin-left:0

}

.xlarge-push-0 {

left:auto;

right:auto

}

.xlarge-pull-0 {

right:auto;

left:auto

}

.xlarge-1 {

width:8.33333%

}

.xlarge-offset-1 {

margin-left:8.33333%

}

.xlarge-push-1 {

left:8.33333%;

right:auto

}

.xlarge-pull-1 {

right:8.33333%;

left:auto

}

.xlarge-2 {

width:16.66667%

}

.xlarge-offset-2 {

margin-left:16.66667%

}

.xlarge-push-2 {

left:16.66667%;

right:auto

}

.xlarge-pull-2 {

right:16.66667%;

left:auto

}

.xlarge-3 {

width:25%

}

.xlarge-offset-3 {

margin-left:25%

}

.xlarge-push-3 {

left:25%;

right:auto

}

.xlarge-pull-3 {

right:25%;

left:auto

}

.xlarge-4 {

width:33.33333%

}

.xlarge-offset-4 {

margin-left:33.33333%

}

.xlarge-push-4 {

left:33.33333%;

right:auto

}

.xlarge-pull-4 {

right:33.33333%;

left:auto

}

.xlarge-5 {

width:41.66667%

}

.xlarge-offset-5 {

margin-left:41.66667%

}

.xlarge-push-5 {

left:41.66667%;

right:auto

}

.xlarge-pull-5 {

right:41.66667%;

left:auto

}

.xlarge-6 {

width:50%

}

.xlarge-offset-6 {

margin-left:50%

}

.xlarge-push-6 {

left:50%;

right:auto

}

.xlarge-pull-6 {

right:50%;

left:auto

}

.xlarge-7 {

width:58.33333%

}

.xlarge-offset-7 {

margin-left:58.33333%

}

.xlarge-push-7 {

left:58.33333%;

right:auto

}

.xlarge-pull-7 {

right:58.33333%;

left:auto

}

.xlarge-8 {

width:66.66667%

}

.xlarge-offset-8 {

margin-left:66.66667%

}

.xlarge-push-8 {

left:66.66667%;

right:auto

}

.xlarge-pull-8 {

right:66.66667%;

left:auto

}

.xlarge-9 {

width:75%

}

.xlarge-offset-9 {

margin-left:75%

}

.xlarge-push-9 {

left:75%;

right:auto

}

.xlarge-pull-9