html - Ebay 模板列表 CSS 不加载

Question

我已经看到多篇关于 Ebay HTML CSS 模板未加载 CSS 的帖子，而且这似乎是多年来反复出现的问题。有些人建议切换到高级编辑器，或在文件顶部添加中断等，但这些要么不起作用，要么不再是一种选择。

我将以下 HTML CSS 直接发布到 Ebay HTML 模板中： https ://jsfiddle.net/lucasrahn09/q4chn27t/1/

<style>  :root {    --main-color: #1f2557;  }  .container-fluid {    padding: 0 !important;    margin-bottom: calc(20vw - 110px) !important;  }  @media (max-width: 768px) {    .container-fluid {      margin-bottom: calc(20vw - 100px) !important;    }  }  html {    height: 100%;  }  .col {    width: auto !important;  }  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);  /* SKILLS */  .skills div {    padding: 10px 0;    border-right: 1px dotted #ddd;    text-align: center;    cursor: default;  }  .skills div:last-child {    border-right: none;  }  .skills div i {    color: #ccc;    padding-right: 10px;  }  .skills div a {    color: #666;  }  .skills div:hover i {    color: #343a40;  }  /* SLIDER */  .slider-bg {    margin-bottom: 155px;    padding: 0;    background: var(--main-color);    max-height: 140px;  }  div.slider {    padding: 0;    margin: 0 auto;    max-width: 100%;    max-height: 140px;    overflow: hidden;  }  /* EXCHANGE THIS LINE FOR SLIDING BANNER */  /* div.slider ul {width:1000%; height:auto; position:relative; list-style:none; left:0; margin:0; padding:0; -webkit-animation: next 12s infinite; -moz-animation: next 12s infinite;} */  div.slider ul {    width: 1000%;    height: auto;    position: relative;    list-style: none;    left: 0;    margin: 0;    padding: 0;  }  /*  */  div.slider ul:hover {    -moz-animation-play-state: paused;    -webkit-animation-play-state: paused;  }  div.slider li {    width: 10%;    list-style: none;    float: left;    margin: 0;    padding: 0;  }  div.slider img {    max-width: 100%;  }  .banner {    max-width: 100%;    padding: 0;  }  @-webkit-keyframes next {    0% {      opacity: 0;    }    1% {      left: 0;      opacity: 1;    }    18% {      left: 0;      opacity: 1;    }    19% {      opacity: 0.6;    }    20% {      left: -100%;      opacity: 1;    }    58% {      left: -100%;      opacity: 1;    }    59% {      opacity: 0.6;    }    60% {      left: -200%;      opacity: 1;    }    98% {      left: -200%;      opacity: 1;    }    99% {      opacity: 0.3;    }    100% {      left: 0;      opacity: 0;    }  }  @-moz-keyframes next {    0% {      opacity: 0;    }    1% {      left: 0;      opacity: 1;    }    18% {      left: 0;      opacity: 1;    }    19% {      opacity: 0.6;    }    20% {      left: -100%;      opacity: 1;    }    58% {      left: -100%;      opacity: 1;    }    59% {      opacity: 0.6;    }    60% {      left: -200%;      opacity: 1;    }    98% {      left: -200%;      opacity: 1;    }    99% {      opacity: 0.3;    }    100% {      left: 0;      opacity: 0;    }  }  .banner {    position: relative;  }  .banner img {    width: 100%;    height: 19vw;  }  .banner a {    position: absolute;    color: white;    font-family: optima;    font-size: 17px;    font-weight: 700;    top: 89%;    left: 86vw;  }  .banner a:hover {    text-decoration: none;    color: white;    font-size: 17.5px;  }  @media (min-width: 992px) and (max-width: 1200px) {    .banner a {      left: 82vw;      top: 87%;    }  }  @media (min-width: 768px) and (max-width: 992px) {    .banner a {      left: 78vw;      top: 85%;    }  }  @media (max-width: 768px) {    .banner a {      left: 68vw;      top: 82%;      font-size: 14px;    }    .banner a:hover {      font-size: 14.5px;    }  }  /* ARTICLEPICS */  .articlepics.galerie > .anker {    display: none;  }  .articlepics.galerie > ul > .slide.img img {    width: 100%;    height: auto;  }  .articlepics.galerie > ul > .slide {    position: relative;    display: inline-block;    width: 100%;    height: auto;    overflow: hidden;    line-height: normal;    white-space: normal;    vertical-align: top;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }  /* Thumbnails */  .articlepics.galerie > .thumb > div {    margin-left: -50%;    width: 100%;  }  .articlepics.galerie > .thumb > label {    position: relative;    display: inline-block;    cursor: pointer;  }  .articlepics.galerie > .thumb {    bottom: 5px;    margin-bottom: 5px;  }  .articlepics.galerie > .thumb > label {    border-radius: 50%;    margin: 0 5px;    padding: 9px;    background: none;  }  .articlepics.galerie > .thumb > label > .anker {    position: absolute;    left: 50%;    top: 50%;    margin-left: -2px;    margin-top: -2px;    background: transparent;    border-radius: 50%;    padding: 2px;  }  .articlepics.galerie > .thumb > label:hover > .anker,  .articlepics.galerie > #slide1:checked ~ .thumb > label.pic1 > .anker,  .articlepics.galerie > #slide2:checked ~ .thumb > label.pic2 > .anker,  .articlepics.galerie > #slide3:checked ~ .thumb > label.pic3 > .anker,  .articlepics.galerie > #slide4:checked ~ .thumb > label.pic4 > .anker,  .articlepics.galerie > #slide5:checked ~ .thumb > label.pic5 > .anker,  .articlepics.galerie > #slide6:checked ~ .thumb > label.pic6 > .anker,  .articlepics.galerie > #slide7:checked ~ .thumb > label.pic7 > .anker,  .articlepics.galerie > #slide8:checked ~ .thumb > label.pic8 > .anker,  .articlepics.galerie > #slide9:checked ~ .thumb > label.pic9 > .anker,  .articlepics.galerie > #slide10:checked ~ .thumb > label.pic10 > .anker,  .articlepics.galerie > #slide11:checked ~ .thumb > label.pic11 > .anker,  .articlepics.galerie > #slide12:checked ~ .thumb > label.pic12 > .anker,  .articlepics.galerie > #slide13:checked ~ .thumb > label.pic13 > .anker,  .articlepics.galerie > #slide14:checked ~ .thumb > label.pic14 > .anker,  .articlepics.galerie > #slide15:checked ~ .thumb > label.pic15 > .anker,  .articlepics.galerie > #slide16:checked ~ .thumb > label.pic16 > .anker {    background: none;  }  .articlepics.galerie {    height: auto;    max-height: auto;    margin-bottom: 0;    text-align: center;  }  .articlepics.galerie img {    border-radius: 3px;    width: 97%;  }  .articlepics.galerie .thumb {    position: relative;  }  .articlepics.galerie > .thumb > label {    box-sizing: border-box;    border-radius: none;    margin: 0 auto;    padding: 5px;    background: none;    text-align: center;  }  .articlepics.galerie > .thumb > label img {    margin: 0 auto;    max-height: 115px;    width: auto;    border: 2px solid #ddd;  }  .articlepics.galerie > #slide1:checked ~ .thumb > label.pic1 > img,  .articlepics.galerie > #slide2:checked ~ .thumb > label.pic2 > img,  .articlepics.galerie > #slide3:checked ~ .thumb > label.pic3 > img,  .articlepics.galerie > #slide4:checked ~ .thumb > label.pic4 > img,  .articlepics.galerie > #slide5:checked ~ .thumb > label.pic5 > img,  .articlepics.galerie > #slide6:checked ~ .thumb > label.pic6 > img,  .articlepics.galerie > #slide7:checked ~ .thumb > label.pic7 > img,  .articlepics.galerie > #slide8:checked ~ .thumb > label.pic8 > img,  .articlepics.galerie > #slide9:checked ~ .thumb > label.pic9 > img,  .articlepics.galerie > #slide10:checked ~ .thumb > label.pic10 > img,  .articlepics.galerie > #slide11:checked ~ .thumb > label.pic11 > img,  .articlepics.galerie > #slide12:checked ~ .thumb > label.pic12 > img,  .articlepics.galerie > #slide12:checked ~ .thumb > label.pic13 > img,  .articlepics.galerie > #slide12:checked ~ .thumb > label.pic14 > img,  .articlepics.galerie > #slide12:checked ~ .thumb > label.pic15 > img,  .articlepics.galerie > #slide12:checked ~ .thumb > label.pic16 > img {    border: 2px solid #666;  }  /* Original-Bild */  .articlepics.galerie > #slide1:checked ~ ul > .slide.pic1,  .articlepics.galerie > #slide2:checked ~ ul > .slide.pic2,  .articlepics.galerie > #slide3:checked ~ ul > .slide.pic3,  .articlepics.galerie > #slide4:checked ~ ul > .slide.pic4,  .articlepics.galerie > #slide5:checked ~ ul > .slide.pic5,  .articlepics.galerie > #slide6:checked ~ ul > .slide.pic6,  .articlepics.galerie > #slide7:checked ~ ul > .slide.pic7,  .articlepics.galerie > #slide8:checked ~ ul > .slide.pic8,  .articlepics.galerie > #slide9:checked ~ ul > .slide.pic9,  .articlepics.galerie > #slide10:checked ~ ul > .slide.pic10,  .articlepics.galerie > #slide11:checked ~ ul > .slide.pic11,  .articlepics.galerie > #slide12:checked ~ ul > .slide.pic12,  .articlepics.galerie > #slide13:checked ~ ul > .slide.pic13,  .articlepics.galerie > #slide14:checked ~ ul > .slide.pic14,  .articlepics.galerie > #slide15:checked ~ ul > .slide.pic15,  .articlepics.galerie > #slide16:checked ~ ul > .slide.pic16 {    opacity: 1;    z-index: 2;  }  /* Animations */  .articlepics.galerie > ul > .slide {    display: inline-block;    position: absolute;    left: 0;    top: 0;    opacity: 0;    transition: opacity 1250ms ease;  }  @-webkit-keyframes fade {    0%,    37.254901960784316%,    100% {      opacity: 0;    }    12.254901960784315%,    25% {      opacity: 1;    }    0%,    24.999% {      z-index: 2;    }    25.001%,    100% {      z-index: 1;    }  }  @keyframes fade {    0%,    37.254901960784316%,    100% {      opacity: 0;    }    12.254901960784315%,    25% {      opacity: 1;    }    0%,    24.999% {      z-index: 2;    }    25.001%,    100% {      z-index: 1;    }  }  /* Größe */  .articlepics.galerie {    position: relative;    margin-top: 2em;  }  .articlepics.galerie > ul {    height: 97vw;  }  .articlepics.galerie > ul > .slide.img img {    width: 200%;    height: 100vw;  }  .articlepics.galerie > .thumb > label img {    width: auto;    margin: 0 auto;  }  /* @media (min-width: 992px) and (max-width: 1200px) {      .articlepics.galerie > ul {        height: 1120px;      }    }    @media (min-width: 768px) and (max-width: 992px) {      .articlepics.galerie > ul {        height: 830px;      }    }    @media (max-width: 768px) {      .articlepics.galerie > ul {        height: 555px;      }    } */  /* ARTICLE VARIANTEN */  .variants {    margin: 0px 0;    padding: 0;    background: none;  }  .variants input[type="radio"] {    display: none;  }  .variants label {    display: block;    float: left;    width: auto;    color: #3f3f3f;    font-size: 16px;    font-weight: 700;    text-decoration: none;    text-align: center;    margin: 0;    overflow: hidden;  }  .variants label span.var {    display: inline-block;    cursor: pointer;  }  .variant-content {    display: none;    width: 100%;    float: left;    padding: 0;    box-sizing: border-box;    background: #fff;    margin-top: 0;    text-align: left;  }  .variant-content h2 {    font-size: 18px;    font-weight: 700;    color: #3f3f3f;  }  .variants [id^="tab"]:checked + label {    background: #666666;    color: #fff;  }  .variants:after {    content: "";    display: table;    clear: both;  }  #variant1:checked ~ #variant-content1,  #variant2:checked ~ #variant-content2,  #variant3:checked ~ #variant-content3,  #variant4:checked ~ #variant-content4,  #variant5:checked ~ #variant-content5,  #variant6:checked ~ #variant-content6,  #variant7:checked ~ #variant-content7,  #variant8:checked ~ #variant-content8,  #variant9:checked ~ #variant-content9 {    display: block;  }  .variant-content ul {    margin: 0px 0;  }  .variant-content ul li {    display: inline;    border: none;  }  .variant-content ul li strong {    margin-right: 3px;  }  .variant-content a {    color: #3f3f3f;    font-weight: 700;    text-decoration: none;  }  .variant-content a:hover {    color: #666666;    text-decoration: none;  }  /* TEXT & ÜBERSCHRIFTEN */  .article h1,  .container h1 {    display: inline-table;    line-height: 30px;    /* margin-top: 30px; */    width: 100%;    color: var(--main-color);    font-size: 24px;    font-weight: 750;    text-align: center;    font-family: optima;    text-transform: uppercase;  }  blockquote {    display: block;    margin: 20px 0;    padding: 20px;    font-family: "Open Sans", serif;    font-size: 14px;    color: #3f3f3f;    background: repeating-linear-gradient(      45deg,      #fff,      #fff 2px,      #efefef 2px,      #efefef 4px    );    border-left: 3px solid #666666;  }  code {    display: block;    margin: 20px 0;    padding: 20px;    font-family: "Open Sans", serif;    font-size: 14px;    color: #fff;    background: repeating-linear-gradient(      45deg,      #333,      #333 2px,      #3f3f3f 2px,      #3f3f3f 4px    );    border-left: 3px solid #666666;  }  mark {    font-family: "Open Sans", serif;    font-size: 14px;    color: #3f3f3f;    background: #fff0ce;  }  small {    font-size: 12px;    color: #999;  }  kbd {    font-family: "Open Sans", serif;    font-size: 14px;    box-shadow: none;  }  .condition h2 {    display: inline-block;    padding: 0 2px 3px 2px;    margin: 30px 10px 20px 0;    font-size: 22px;    color: #3f3f3f;    font-weight: 700;    border-bottom: 2px solid #b41b1b;  }  .condition h3 {    display: inline-block;    padding: 0;    margin: 10px 0;    font-size: 22px;    color: #3f3f3f;    font-weight: 400;  }  .condition blockquote {    padding-bottom: 2px;    font-size: 14px;  }  /* ARTIKELBESCHREIBUNG */  .artpic {    /* padding: 0 40px; */    display: flex;    justify-content: center;    flex-direction: column;  }  div.desc {    margin: 3em auto;  }  .desc h2 {    display: table;    padding: 0 2px 3px 2px;    margin: 30px 0 20px 0;    font-size: 22px;    color: #3f3f3f;    font-weight: 700;    border-bottom: 2px solid #b41b1b;  }  .desc h3 {    display: block;    padding: 0;    margin: 20px 0;    font-size: 20px;    color: #3f3f3f;    font-weight: 300;    margin-top: 60px;  }  .desc ul,  .tab-content ul {    margin: 15px 0;    padding: 0;  }  .desc span.var {    display: inline-block;    min-width: 60px;    padding: 7px;    margin: 1px;    color: #666;    border: 1px solid #fff;    text-align: center;    cursor: default;    background: repeating-linear-gradient(      45deg,      #fff,      #fff 2px,      #efefef 2px,      #efefef 4px    );  }  .desc span.var:hover {    border: 1px solid #ddd;  }  /* BUTTONS */  .buynowbox {    margin-top: 30px;    padding: 25px 20px;    background: repeating-linear-gradient(      45deg,      #fff,      #fff 2px,      #efefef 2px,      #efefef 4px    );  }  .price {    margin: 0;    padding: 0 20px;    cursor: default;  }  .price h3 {    margin: 0;    padding: 0;    color: #3f3f3f;    font-size: 30px;    font-weight: 700;    text-align: left;  }  .price h4 {    margin: 0;    padding: 5px 0 0 0;    color: #999;    font-size: 14px;    font-weight: 400;    text-align: left;  }  .desc h3 span:hover {    background: none;  }  a.bnb {    display: block;    margin: 0 0 10px 0;    line-height: 40px;    color: #fff;    text-align: center;    background: #666;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    font-weight: 700;    text-decoration: none !important;  }  a.bnb:hover {    background: repeating-linear-gradient(      45deg,      #333,      #333 2px,      #3f3f3f 2px,      #3f3f3f 4px    );    color: white;  }  a.bnb:before {    font-family: "FontAwesome";    content: "\f291";    font-size: 14px;    padding: 0;    margin: 0;    display: block;    background: repeating-linear-gradient(      45deg,      #333,      #333 2px,      #3f3f3f 2px,      #3f3f3f 4px    );    color: #fff;    width: 50px;    float: left;  }  a.beo,  a.fsb {    display: block;    margin: 0;    padding: 2px 0 0 20px;    color: #3f3f3f;    font-weight: 400;    text-decoration: none !important;  }  a.beo i,  a.fsb i {    color: #666;    padding-right: 10px;  }  a.beo:hover,  a.fsb:hover {    color: #666;  }  /* TABS */  .tabs {    margin: 40px 0;    padding: 0;    background: none;  }  .tabs input[type="radio"] {    display: none;  }  .tabs label {    display: block;    float: left;    width: 33.333333%;    font-family: "Open Sans", serif;    color: #3f3f3f;    font-size: 16px;    font-weight: 700;    text-decoration: none;    text-align: center;    cursor: pointer;    background: repeating-linear-gradient(      45deg,      #fff,      #fff 2px,      #efefef 2px,      #efefef 4px    );    padding: 20px 0 15px 0;    margin: 0;    overflow: hidden;    text-transform: uppercase;  }  .tabs label span {    display: inline-block;  }  .tabs label:hover {    background: #eee;  }  .tab-content {    display: none;    width: 100%;    float: left;    padding: 10px 20px 20px 20px;    box-sizing: border-box;    background: #fff;    border-top: 3px solid var(--main-color);    margin-top: 0;    text-align: left;  }  .tab-content h2 {    font-size: 18px;    font-weight: 700;    color: #3f3f3f;    border-bottom: 2px solid #b41b1b;    display: inline-block;    padding-bottom: 2px;    margin-bottom: 1rem;  }  .tab-content h3 {    display: block;    padding: 0;    margin: 20px 0;    font-size: 20px;    color: #3f3f3f;    font-weight: 300;  }  .tabs [id^="tab"]:checked + label {    background: var(--main-color);    color: #fff;  }  #tab1:checked ~ #tab-content1,  #tab2:checked ~ #tab-content2,  #tab3:checked ~ #tab-content3,  #tab4:checked ~ #tab-content4,  #tab5:checked ~ #tab-content5,  #tab6:checked ~ #tab-content6,  #tab7:checked ~ #tab-content7,  #tab8:checked ~ #tab-content8,  #tab9:checked ~ #tab-content9 {    display: block;  }  .tabs:after {    content: "";    display: table;    clear: both;  }  .tab-content ul {    margin: 10px 0;  }  .tab-content a {    color: #3f3f3f;    font-weight: 700;    text-decoration: none;  }  .tab-content a:hover {    color: #666666;    text-decoration: none;  }  /* TABLE */  .tab-content table {    margin: 20px 0;    cursor: default;    font-family: "Open Sans", serif;    color: #3f3f3f;    font-size: 14px;  }  .tab-content table tr {    border-bottom: 1px solid #ddd;  }  .tab-content table tr:nth-child(odd) {    background: repeating-linear-gradient(      45deg,      #fff,      #fff 2px,      #efefef 2px,      #efefef 4px    );  }  .tab-content table tr:last-child {    border-bottom: none;  }  .tab-content table td {    padding: 10px;  }  .tab-content table td:first-child {    font-weight: 700;    border-right: 1px solid #ddd;  }  /* SERVICE */  .service {    padding: 25px 15px;    background: var(--main-color);    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    cursor: default;  }  .service i {    background: #fff;    transform: scale(3);    position: relative;    top: -40px;    color: #666666;    padding: 10px;    -webkit-border-radius: 20px;    -moz-border-radius: 20px;    border-radius: 20px;  }  .service div {    padding: 20px;  }  .service div div {    margin: 0;    padding: 0 30px 30px 30px;    background: #fff;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    text-align: center;    color: #3f3f3f;  }  .service div h2 {    margin: 0;    padding: 10px 0 20px 0;    border: none;    display: block;    text-align: center;    font-size: 20px;    color: #3f3f3f;    font-weight: 700;  }  /* CROSS-SELL */  div.xsell {    margin: 20px 0 30px 0;    padding: 10px;    background: #fff;  }  div.xsell a {    text-decoration: none !important;    color: inherit;  }  div.xsell img {    margin: 0 auto;    padding: 0;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;  }  div.xsell h4 {    margin: 0;    padding: 15px;    text-align: center;    font-weight: 700;    font-size: 16px;    color: #3f3f3f;    background: repeating-linear-gradient(      45deg,      #fff,      #fff 2px,      #efefef 2px,      #efefef 4px    );  }  div.xsell span {    display: block;    margin: 0;    padding: 5px 0 0 0;    color: #666666;    font-weight: 700;    font-size: 14px;    text-align: center;  }  div.xsell:hover {    background: repeating-linear-gradient(      45deg,      #fff,      #fff 2px,      #efefef 2px,      #efefef 4px    );  }  div.xsell:hover h4 {    background: none;  }  /* NEWSLETTER */  .newsletter {    background: #666666;    padding: 35px 0 !important;  }  .newsletter div {    text-align: right;    color: #fff;    font-weight: 700;    font-size: 30px;  }  a.nlb {    display: block;    max-width: 250px;    background: repeating-linear-gradient(      45deg,      #333,      #333 2px,      #3f3f3f 2px,      #3f3f3f 4px    );    color: #fff;    text-align: center;    font-size: 16px;    padding: 13px 30px;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;  }  a.nlb:hover {    text-decoration: none;    background: #fff;    color: #3f3f3f;  }  /* FOOTER */  .footer {    background: #3f3f3f;    padding: 0 0 20px 0;  }  .footer h6 {    margin: 20px 0;    padding: 10px 0;    text-align: center;    color: #fff;    font-weight: 700;    font-size: 16px;    background: repeating-linear-gradient(      45deg,      #333,      #333 2px,      #3f3f3f 2px,      #3f3f3f 4px    );  }  .footer ul {    margin: 0;    padding: 0;  }  .footer ul li {    list-style-type: none;    text-align: center;    padding: 5px 0;    border-top: 1px dotted #555;  }  .footer ul li:first-child {    border: none;  }  .footer ul li a {    color: #666666;  }  .footer ul li a:hover {    color: #fff;    text-decoration: none;  }  .footer p {    padding: 0 20px;    text-align: center;    line-height: 20px;    color: #999;  }  .footer p img {    margin: 8px auto;  }  .footer p.zvb {    line-height: 32px;    text-align: left;    padding: 0 50px;  }  .footer p.zvb i {    color: #888;    font-weight: 400;    font-size: 20px;  }  .footer a.kontakt {    display: block;    max-width: 220px;    padding: 0;    line-height: 40px;    margin: 20px auto !important;    font-size: 14px;    font-weight: 700;    background: #666666;    color: #3f3f3f;    text-align: center;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    text-decoration: none !important;    border: 2px solid #666666;  }  .footer a.kontakt:hover {    background: repeating-linear-gradient(      45deg,      #333,      #333 2px,      #3f3f3f 2px,      #3f3f3f 4px    );    color: #fff;  }  .footer a.kontakt:before {    font-family: "FontAwesome";    content: "\f0e6";    font-size: 14px;    padding: 0;    margin: 0;    display: block;    background: repeating-linear-gradient(      45deg,      #333,      #333 2px,      #3f3f3f 2px,      #3f3f3f 4px    );    color: #666666;    width: 50px;    float: left;  }  /* MEDIA QUERY */  @media (min-width: 992px) and (max-width: 1200px) {    .service div h2 {      font-size: 16px;    }    .footer p.zvb {      padding: 0 20px;    }  }  @media (min-width: 768px) and (max-width: 992px) {    .artpic {      /* padding: 0 100px; */      display: flex;      justify-content: center;    }    div.info {      font-size: 12px;    }    .desc {      float: none;    }    a.nlb {      font-size: 14px;      padding: 10px;    }    div.nlb div div:first-child {      font-size: 22px;      padding: 3px 0;    }  }  @media (max-width: 768px) {    .artpic {      /* padding: 10px 0; */      display: flex;      justify-content: center;    }    div.logo {      text-align: center;    }    a.bnb {      margin: 10px 0;    }    .logo img {      margin: 0 auto;      padding: 0;    }    div.categories {      margin-bottom: 10px;    }    /* div.container h1 {        font-size: 14px;        text-align: center;        padding: 20px;        line-height: 18px;      } */    div.container h1:before,    div.container h1:after {      display: none;    }    .desc {      float: none;      margin-top: 0;      padding: 0 20px;    }    .desc h2 {      font-size: 18px;    }    .tabs label {      width: 100%;    }    .tabs label span {      display: inline-block;    }    div.xsell {      margin: 20px;    }    div.nlb {      margin: 0;      padding: 30px 0 10px 0;    }    .nlb div div:first-child {      padding: 0 0 20px 0;      font-size: 14px;      text-align: center;      float: none;    }    a.nlb {      margin: 0 auto;      font-size: 14px;      text-align: center;    }  }  .wide-container {    max-width: 1470px;  }  .remove-all-styles li {    margin-left: 30px;  }</style>

并直接在浏览器以及其他在线工具（例如https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_class ）中尝试过，并拥有我发布的 html https://jsfiddle的版本.net/lucasrahn09/q4chn27t/1/。它按预期工作，尽管我在 ebay 模板中直接遇到问题。需要注意的一点是，这是从生成 html 模板的我的应用程序中复制出来的，而我真正使它工作的唯一方法是直接复制到特别是 Visual Studio 代码并重新复制到 Ebay Lister 中。我与其他一些编辑尝试了相同的过程，但没有成功。我很想知道其他人是否有类似的经历？

标签： htmlcssebay-design-templates