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 {

right:75%;

left:auto

}

.xlarge-10 {

width:83.33333%

}

.xlarge-offset-10 {

margin-left:83.33333%

}

.xlarge-push-10 {

left:83.33333%;

right:auto

}

.xlarge-pull-10 {

right:83.33333%;

left:auto

}

.xlarge-11 {

width:91.66667%

}

.xlarge-offset-11 {

margin-left:91.66667%

}

.xlarge-push-11 {

left:91.66667%;

right:auto

}

.xlarge-pull-11 {

right:91.66667%;

left:auto

}

.xlarge-12 {

width:100%

}

.xlarge-offset-12 {

margin-left:100%

}

.xlarge-push-12 {

left:100%;

right:auto

}

.xlarge-pull-12 {

right:100%;

left:auto

}

.xlarge-centered {

margin-left:auto;

margin-right:auto;

float:none

}

.xlarge-uncentered {

margin-left:0;

margin-right:0

}

.xlarge-last {

float:right

}

.xlarge-notlast {

float:left

}

}@media only screen and (max-width: 1068px) {

.medium-offset-0 {

margin-left:0

}

.medium-push-0 {

left:auto;

right:auto

}

.medium-pull-0 {

right:auto;

left:auto

}

.medium-1 {

width:8.33333%

}

.medium-offset-1 {

margin-left:8.33333%

}

.medium-push-1 {

left:8.33333%;

right:auto

}

.medium-pull-1 {

right:8.33333%;

left:auto

}

.medium-2 {

width:16.66667%

}

.medium-offset-2 {

margin-left:16.66667%

}

.medium-push-2 {

left:16.66667%;

right:auto

}

.medium-pull-2 {

right:16.66667%;

left:auto

}

.medium-3 {

width:25%

}

.medium-offset-3 {

margin-left:25%

}

.medium-push-3 {

left:25%;

right:auto

}

.medium-pull-3 {

right:25%;

left:auto

}

.medium-4 {

width:33.33333%

}

.medium-offset-4 {

margin-left:33.33333%

}

.medium-push-4 {

left:33.33333%;

right:auto

}

.medium-pull-4 {

right:33.33333%;

left:auto

}

.medium-5 {

width:41.66667%

}

.medium-offset-5 {

margin-left:41.66667%

}

.medium-push-5 {

left:41.66667%;

right:auto

}

.medium-pull-5 {

right:41.66667%;

left:auto

}

.medium-6 {

width:50%

}

.medium-offset-6 {

margin-left:50%

}

.medium-push-6 {

left:50%;

right:auto

}

.medium-pull-6 {

right:50%;

left:auto

}

.medium-7 {

width:58.33333%

}

.medium-offset-7 {

margin-left:58.33333%

}

.medium-push-7 {

left:58.33333%;

right:auto

}

.medium-pull-7 {

right:58.33333%;

left:auto

}

.medium-8 {

width:66.66667%

}

.medium-offset-8 {

margin-left:66.66667%

}

.medium-push-8 {

left:66.66667%;

right:auto

}

.medium-pull-8 {

right:66.66667%;

left:auto

}

.medium-9 {

width:75%

}

.medium-offset-9 {

margin-left:75%

}

.medium-push-9 {

left:75%;

right:auto

}

.medium-pull-9 {

right:75%;

left:auto

}

.medium-10 {

width:83.33333%

}

.medium-offset-10 {

margin-left:83.33333%

}

.medium-push-10 {

left:83.33333%;

right:auto

}

.medium-pull-10 {

right:83.33333%;

left:auto

}

.medium-11 {

width:91.66667%

}

.medium-offset-11 {

margin-left:91.66667%

}

.medium-push-11 {

left:91.66667%;

right:auto

}

.medium-pull-11 {

right:91.66667%;

left:auto

}

.medium-12 {

width:100%

}

.medium-offset-12 {

margin-left:100%

}

.medium-push-12 {

left:100%;

right:auto

}

.medium-pull-12 {

right:100%;

left:auto

}

.medium-centered {

margin-left:auto;

margin-right:auto;

float:none

}

.medium-uncentered {

margin-left:0;

margin-right:0

}

.medium-last {

float:right

}

.medium-notlast {

float:left

}

}@media only screen and (max-width: 735px) {

.small-offset-0 {

margin-left:0

}

.small-push-0 {

left:auto;

right:auto

}

.small-pull-0 {

right:auto;

left:auto

}

.small-1 {

width:8.33333%

}

.small-offset-1 {

margin-left:8.33333%

}

.small-push-1 {

left:8.33333%;

right:auto

}

.small-pull-1 {

right:8.33333%;

left:auto

}

.small-2 {

width:16.66667%

}

.small-offset-2 {

margin-left:16.66667%

}

.small-push-2 {

left:16.66667%;

right:auto

}

.small-pull-2 {

right:16.66667%;

left:auto

}

.small-3 {

width:25%

}

.small-offset-3 {

margin-left:25%

}

.small-push-3 {

left:25%;

right:auto

}

.small-pull-3 {

right:25%;

left:auto

}

.small-4 {

width:33.33333%

}

.small-offset-4 {

margin-left:33.33333%

}

.small-push-4 {

left:33.33333%;

right:auto

}

.small-pull-4 {

right:33.33333%;

left:auto

}

.small-5 {

width:41.66667%

}

.small-offset-5 {

margin-left:41.66667%

}

.small-push-5 {

left:41.66667%;

right:auto

}

.small-pull-5 {

right:41.66667%;

left:auto

}

.small-6 {

width:50%

}

.small-offset-6 {

margin-left:50%

}

.small-push-6 {

left:50%;

right:auto

}

.small-pull-6 {

right:50%;

left:auto

}

.small-7 {

width:58.33333%

}

.small-offset-7 {

margin-left:58.33333%

}

.small-push-7 {

left:58.33333%;

right:auto

}

.small-pull-7 {

right:58.33333%;

left:auto

}

.small-8 {

width:66.66667%

}

.small-offset-8 {

margin-left:66.66667%

}

.small-push-8 {

left:66.66667%;

right:auto

}

.small-pull-8 {

right:66.66667%;

left:auto

}

.small-9 {

width:75%

}

.small-offset-9 {

margin-left:75%

}

.small-push-9 {

left:75%;

right:auto

}

.small-pull-9 {

right:75%;

left:auto

}

.small-10 {

width:83.33333%

}

.small-offset-10 {

margin-left:83.33333%

}

.small-push-10 {

left:83.33333%;

right:auto

}

.small-pull-10 {

right:83.33333%;

left:auto

}

.small-11 {

width:91.66667%

}

.small-offset-11 {

margin-left:91.66667%

}

.small-push-11 {

left:91.66667%;

right:auto

}

.small-pull-11 {

right:91.66667%;

left:auto

}

.small-12 {

width:100%

}

.small-offset-12 {

margin-left:100%

}

.small-push-12 {

left:100%;

right:auto

}

.small-pull-12 {

right:100%;

left:auto

}

.small-centered {

margin-left:auto;

margin-right:auto;

float:none

}

.small-uncentered {

margin-left:0;

margin-right:0

}

.small-last {

float:right

}

.small-notlast {

float:left

}

}

/* 宽度自适应END */

.promos {

border-bottom:2px solid #fff

}

.promos ul {

margin:0;

padding:0

}

.promos .promo-position {

list-style-type:none;

box-sizing:border-box;

border-top:2px solid #fff;

border-right:2px solid #fff

}

@media only screen and (max-width: 1068px) {

.promos .promo-position.promo-tile-position-1 {

border-right:none

}

}.promos .promo-position.promo-tile-position-3 {

border-right:none

}

@media only screen and (max-width: 735px) {

.promos .promo-position {

border-right:none

}

}.promos .promo-tile {

list-style-type:none;

box-sizing:border-box;

border-top:2px solid #fff;

border-right:2px solid #fff

}

@media only screen and (max-width: 1068px) {

.promos .promo-tile.promo-tile-position-1 {

border-right:none

}

}.promos .promo-tile.promo-tile-position-3 {

border-right:none

}

@media only screen and (max-width: 735px) {

.promos .promo-tile {

border-right:none

}

}.promos .promo {

display:block;

background-position:center center;

height:200px

}

.promos .promo-label {

position:absolute;

clip:rect(1px 1px 1px 1px);

clip:rect(1px, 1px, 1px, 1px);

-webkit-clip-path:inset(0px 0px 99.9% 99.9%);

clip-path:inset(0px 0px 99.9% 99.9%);

overflow:hidden;

height:1px;

width:1px;

padding:0;

border:0

}

[data-promo-type] {

visibility:hidden

}

[data-promo-type].promos-ready {

visibility:visible

}

.no-js [data-promo-type],.no-enhanced-gallery [data-promo-type] {

visibility:visible

}

/* 第一个宽屏 */

.promo-holiday-music {

background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_large.jpg")

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {

.promo-holiday-music {

background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_large_2x.jpg")

}

}

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

.promo-holiday-music {

background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_xlarge.jpg")

}

}

@media only screen and (min-width: 1442px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1442px) and (min-resolution: 1.5dppx), only screen and (min-width: 1442px) and (min-resolution: 144dpi) {

.promo-holiday-music {

background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_xlarge_2x.jpg")

}

}

@media only screen and (max-width: 1068px) {

.promo-holiday-music {

background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_medium.jpg")

}

}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {

.promo-holiday-music {

background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_medium_2x.jpg")

}

}

@media only screen and (max-width: 735px) {

.promo-holiday-music {

background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_small.jpg")

}

}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {

.promo-holiday-music {

background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_small_2x.jpg")

}

}

/* 第二个宽屏 */

.promo-airpods {

background-size:360px 200px;

background-repeat:no-repeat;

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_large.jpg")

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {

.promo-airpods {

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_large_2x.jpg")

}

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

.promo-airpods {

background-size:640px 200px;

background-repeat:no-repeat;

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_xlarge.jpg")

}

}@media only screen and (min-width: 1442px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1442px) and (min-resolution: 1.5dppx), only screen and (min-width: 1442px) and (min-resolution: 144dpi) {

.promo-airpods {

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_xlarge_2x.jpg")

}

}@media only screen and (max-width: 1068px) {

.promo-airpods {

background-size:640px 200px;

background-repeat:no-repeat;

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_medium.jpg")

}

}@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {

.promo-airpods {

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_medium_2x.jpg")

}

}@media only screen and (max-width: 735px) {

.promo-airpods {

background-size:736px 200px;

background-repeat:no-repeat;

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_small.jpg")

}

}@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {

.promo-airpods {

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_small_2x.jpg")

}

}

/* 第三个宽屏 */

.promo-ipad-pro {

background-size:360px 200px;

background-repeat:no-repeat;

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_large.jpg")

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {

.promo-ipad-pro {

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_large_2x.jpg")

}

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

.promo-ipad-pro {

background-size:640px 200px;

background-repeat:no-repeat;

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_xlarge.jpg")

}

}@media only screen and (min-width: 1442px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1442px) and (min-resolution: 1.5dppx), only screen and (min-width: 1442px) and (min-resolution: 144dpi) {

.promo-ipad-pro {

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_xlarge_2x.jpg")

}

}@media only screen and (max-width: 1068px) {

.promo-ipad-pro {

background-size:640px 200px;

background-repeat:no-repeat;

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_medium.jpg")

}

}@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {

.promo-ipad-pro {

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_medium_2x.jpg")

}

}@media only screen and (max-width: 735px) {

.promo-ipad-pro {

background-size:736px 200px;

background-repeat:no-repeat;

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_small.jpg")

}

}@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {

.promo-ipad-pro {

background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_small_2x.jpg")

}

}

/* 第四个宽屏 */

.promo-iphone-upgrade {

background-size: 360px 200px;

background-repeat: no-repeat;

background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_large.jpg");

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {

.promo-iphone-upgrade {

background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_large_2x.jpg");

}

}

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

.promo-iphone-upgrade {

background-size: 640px 200px;

background-repeat: no-repeat;

background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_xlarge.jpg");

}

}

@media only screen and (min-width: 1442px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1442px) and (min-resolution: 1.5dppx), only screen and (min-width: 1442px) and (min-resolution: 144dpi) {

.promo-iphone-upgrade {

background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_xlarge_2x.jpg");

}

}

@media only screen and (max-width: 1068px) {

.promo-iphone-upgrade {

background-size: 640px 200px;

background-repeat: no-repeat;

background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_medium.jpg");

}

}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {

.promo-iphone-upgrade {

background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_medium_2x.jpg");

}

}

@media only screen and (max-width: 735px) {

.promo-iphone-upgrade {

background-size: 736px 200px;

background-repeat: no-repeat;

background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_small.jpg");

}

}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {

.promo-iphone-upgrade {

background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_small_2x.jpg");

}

}

html.ie8 .promo-iphone-upgrade {

background-size: 640px 200px;

background-repeat: no-repeat;

background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_medium.jpg");

height: 200px;

font-size: 0

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {

html.ie8 .promo-iphone-upgrade {

background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_medium_2x.jpg")

}

}

本文为3YL原创,转载无需联系,但请注明来自labisart.com。

原创文章不易，如果觉得有帮助，可打赏或点击右侧广告支持：