Question

如何在此处更正代码，以便当用户在移动设备上打开时，它打开到页面的100％，并且文本在两侧都保持对齐，即在Package标题和Ticket标题下方

按原样进行布局是因为每个相邻选项之间都存在直接关联，即包裹-便民与票务相邻-不便

<!DOCTYPE html>
<html>
<style>
  .wrapper {
  width: 100%;
  margin: 2% auto;
}

.hgrp {
  width: 90%;
  text-align: center;
  background: rgba(11, 77, 122, 0.7);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  color: #fff;
}
.hgrp h2 {
  width: 45%;
  float: left;
  font-size: 16px;
}
.hgrp h3 {
  width: 10%;
  float: left;
  font-size: 10px;
}
.hgrp::after {
  content: "";
  clear: both;
  display: block;
}

ul {
  padding: 0;
}

li {
  display: inline-block;
}
li span::after {
  content: "";
  display: block;
  margin: 10px auto;
  border-top: 2px dashed #fff;
  width: 300px;
}

li:last-child span::after {
  display: none;
}

.pro, .cons {
  float: left;
  width: 45%;
  padding: 20px 0;
  text-align: center;
}

.pro {
  background: rgba(0, 128, 0, 0.7);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 10px;
  font-size: 10px;
}

.cons {
  background: rgba(255, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
  border-bottom-right-radius: 10px;
  font-size: 10px;
}

@media screen and (max-width: 414px) {
  .wrapper {
    width: 280px;
  }
}

  </style>
<head>
    <meta charset="UTF-8">
    <title>table pro&cons -flat</title>
</head>

<body style="background-color:#002E5D">
    <div class="wrapper">
        <div class="hgrp">
            <h2>Package</h2>
            <h3>VS</h3>
            <h2>Tickets</h2>
        </div>
        <div class="pro">
            <ul>
<li><span>All-inclusive inc Hotels</span></li></br>
<li><span>All WWE events included</span></li></br>
<li><span>Commemorative Chair with most packages</span></li></br>
<li><span>WWE provide the choices</span></li></br>
<li><span>Convenience</span></li></br>
<li><span>Ease of Use</span></li></br>
<li><span>Peace of mind that everything’s done</br></br></span></li></br>
<li><span>Pay all the package money at once</span></li></br>
<li><span>Single Transaction Purchase</span></li></br>
<li><span>Less stressful buying in one Transaction</span></li></br>
<li><span>Only one day of stress, and all WWE </br>events are all sorted there and then</span></li></br>
<li><span>Excitement of opening the Package</br></br></span></li></br>
<li><span>WWE do the planning for you</span></li></br>
<li><span>WWE provide the Package</span></li></br>
<li><span>Custom to WWE's preferences</br></br></span></li></br>
<li><span>WWE provide the choices regardless </br>of your budget</br></br></span></li></br>
<li><span>No Flexibility with Hotels</span></li></br>
<li><span>Hotel cost are far higher than market value</span></li></br>
<li><span>More Expensive (Pending on preference)</br></br></span></li></br>
<li><span>WWE Provide the cost</span></li></br>
<li><span>You know cost in advance</span></li></br>
<li><span>Packages are overpriced! and don't </br>include your whole holiday spending</span></li></br>
<li><span>Not having to use Ticketmaster</span></li></br>
<li><span></br>WWE don’t get involved here</br></br></span></li></br>
<li><span>Ruch for Packages (One Time)</span></li></br>
<li><span>Guaranteed Tickets to all WWE events</span></li></br>
<li><span>Not receiving tickets till later </span></li></br>
<li><span>All tickets on sale on same day</span></li></br>
<li><span>Not time-consuming</span></li></br>
<li><span>No risk of not getting event tickets</span></li></br>
<li><span>No reseller required</br></br></span></li></br>
<li><span>WWE accept all global locations</br></br></span></li></br>
<li><span>No Flexibility with Seating</span></li></br>
<li><span>Better seats if you get the top package</span></li></br>
<li><span>Don’t get to pick your seat</span></li></br>
<li><span>Guaranteed Good Seats</span></li></br>
<li><span>Better chances of getting Front Row</span></li></br>
<li><span>Seats may not reflect the price you're paying</span></li></br>
<li><span></br>You're stuck with WWE's schedule</br></br></span></li></br>
<li><span>You will pay for all events regardless</span></li></br>
<li><span>WWE Pick the seats for you</span></li></br>
            </ul>
        </div>
        <div class="cons">
            <ul>
              <li><span>	Purchase everything separately	</span></li></br>
<li><span>	Purchase WWE Tickets separately	</span></li></br>
<li><span>	Chair only with Top Tier Tickets	</span></li></br>
<li><span>	More choice available	</span></li></br>
<li><span>	Inconvenience	</span></li></br>
<li><span>	Ticketmaster can be unbearable to use	</span></li></br>
<li><span>	Constantly thinking about when tickets </br>are on sale and WHAT IF's	</span></li></br>
<li><span>	Pay when Tickets go on-sale only	</span></li></br>
<li><span>	Multiple transactions per each event	</span></li></br>
<li><span>	More stressful buying separately	</span></li></br>
<li><span>	Multiple days and pre-days of stress</br></br></span></li></br>
<li><span>	You receive Tickets straight away and know </br>your seat	</span></li></br>
<li><span>	You do the planning and work yourself	</span></li></br>
<li><span>	You create your own Package	</span></li></br>
<li><span>	More customized to your own preference when </br>all things are considered	</span></li></br>
<li><span>	You Can tailor your experience to personal </br>preferences and budget.	</br></br></span></li></br>
<li><span>	Choose what hotels you want	</span></li></br>
<li><span>	You can book hotels cheap if you look carefully	</span></li></br>
<li><span>	Overall Cheaper doing it all </br>separate (Pending on preference)	</span></li></br>
<li><span>	You can spread the cost and Budget	</span></li></br>
<li><span>	Might go over budget	</span></li></br>
<li><span>	Ticket prices are bearable</br></br></span></li></br>
<li><span>	Ticketmaster shutting you out	</span></li></br>
<li><span>	Risk of not getting tickets at a </br>reasonable price for all non-Mania</br> WWE events if not quick enough	</span></li></br>
<li><span>	Rush for Tickets (Multiple Times)	</span></li></br>
<li><span>	Might Sell-out	</span></li></br>
<li><span>	Having tickets straight away	</span></li></br>
<li><span>	Multiple on sale dates and pre-sales	</span></li></br>
<li><span>	Time-consuming	</span></li></br>
<li><span>	Risk of missing out on Tickets (sold-out etc)	</span></li></br>
<li><span>	Might need to use a re-seller </br>i.e. Stubhub or equivalent	</span></li></br>
<li><span>	Not always being able to purchase the tickets </br>first time because of buying outside USA	</span></li></br>
<li><span>	Flexibility to choose your own seating	</span></li></br>
<li><span>	Choose different ticket levels(Better or worse)	</span></li></br>
<li><span>	Select your own seat section	</span></li></br>
<li><span>	You might not get seats at all	</span></li></br>
<li><span>	Harder chance of getting floor level	</span></li></br>
<li><span>	Better seat selection options	</span></li></br>
<li><span>	You may want to see other shows </br>besides WWE’s offerings </br>during WrestleMania weekend.	</span></li></br>
<li><span>	You might not want to attend all WWE events	</span></li></br>
<li><span>	You can pick the seat and events you want	</span></li></br>
            </ul>
        </div>
    </div>
</body>

</html>

当前看起来像

在移动设备上安装包装台

0 个答案: