时间戳

首页 > 解决方案 > HTML 列表在移动视图上被分解

html - HTML 列表在移动视图上被分解

问题描述

在移动视图上，我的简历上的“兴趣”列表视图不断被分解并放置在“技能”列下，而不是“兴趣”的左侧。我想知道这是否与容器大小或媒体最小宽度有关？

这是简历的网络链接。您可以在页面底部看到受影响的列表。

这是一个包含代码的代码笔。

谢谢你。

body, h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', 'IBM Plex Sans', sans-serif;
  font-size: 18px;
  font-weight: normal;
  color: #262626;
  line-height: 32px;
}

header {
  color: #fff;
  background: #477987;
  font-weight: 700;
  font-size: 24px;
}

.container {
  padding: 20px;
}

.item {
  margin: 20px 0;
}

p {
  color: #3F3F3F;
  font-size: 18px;
}

a {
  color: #477987;
  text-decoration: none;
}

a:hover {
  opacity: 0.50;
}

.blue-link {
  color: #fff;
}

h2 {
  color: #477987;
  font-weight: 700;
  border-bottom: 5px solid #477987;
  display: inline-block;
  line-height: 40px;
  margin-top: 28px;
}

.rule {
  box-sizing: border-box;
  height: 1px;
  background: #477987;
}

h3 {
  color: #3F3F3F;
  font-weight: 700;
  margin-top: 20px;
}

.name {
  color: #fff;
  font-size: 100%;
  display: block;
}

.contact {
  color: #fff;
  font-size: 60%;
  font-weight: normal;
  line-height: 10px;
  display: block;
}

.of {
  font-weight: 300;
  font-style: italic;
}

h4 {
  color: #3F3F3F;
  font-weight: 300;
}

h4 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h3, h4 {
  line-height: 28px;
}

h5 {
  font-size: 10px;
  color: #477987;
  margin-top: 0;
  line-height: 32px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

footer {
  background: #477987;
  color: #FFF;
  margin-top: 60px;
}

footer h3 {
  color: #FFF;
}

footer h4 {
  color: #EEE;
}

@media (min-width: 645px) {

  body, h1, h2, h3, h4 {
    font-size: 24px;
  }

  header {
    padding: 30px 0;
    margin-bottom: 16px;
    font-size: 32px;
  }

  .container {
    width: 85%;
    margin: 0 auto;
  }

  h5 {
    font-size: 12px;
  }

  h3, h4 {
    font-size: 90%;
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
  }

  h4 ul {
    margin-right: 48px;
  }

  h4 li {
    padding: 0 0 12px 0;
  }

  footer {
    padding: 30px 0 40px;
  }

}

@media (min-width: 820px) {

  .container {
    width: 820px;
    margin: 0 auto;
  }

}
<!DOCTYPE html>

<html>

<head>
  <title>Cameron Getty | Resume</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;700&display=swap" rel="stylesheet">
</head>

<body>

  <header>
    <div class="container">
      <h2 class="name">Cameron Getty</h2>
      <h3 class="contact"><a class="blue-link" href="mailto:cameronjgetty@gmail.com">cameronjgetty@gmail.com</a></h3>
      <h3 class="contact">209.981.8269</h3>
    </div>
  </header>

  <div class="container">
    <h2>Experience</h2>
    <div class="rule"></div>
    <div class="item">
      <h3>Photography Lab & Studio Assistant</h3>
      <h4> &#8226; CSU Sacramento</h4>
      <p>&bull; Provided technical demonstrations for students and assisted with any troubleshooting.</p>
      <p>&bull; Maintained studio and darkroom operations, including but not limited to: setup and teardown of photographic chemicals, studio lighting, and darkroom enlargers; daily cleaning of equipment and work areas.
      <h5>August 2019—May 2020&nbsp;&nbsp;&nbsp;&nbsp;Sacramento, CA
    </div>

    <div class="item">
      <h3>Graphic Design Intern</h3>
      <h4> &#8226; Lunia Blue Graphics, Inc.</h4>
      <p>&bull; Aided in the conceptualization, design, and execution of new online and print campaigns for regionally-based startups to national brands.</p>
      <p>&bull; Organized and maintained in-house server and client assets.</p>
      <h5>August 2018—May 2019&nbsp;&nbsp;&nbsp;&nbsp;Sacramento, CA
    </div>

    <div class="item">
      <h3>Communications Intern</h3>
      <h4> &#8226; California Conservation Corps</h4>
      <p>&bull; Drafted and managed online, print, and social media communications designed to promote company brand, mission, and values.</p>
      <p>&bull; Assisted in the management and implementation of digital assets and website content.</p>
      <h5>May 2017—February 2018&nbsp;&nbsp;&nbsp;&nbsp;Sacramento, CA
    </div>

    <div class="item">
      <h3>Technical Support Advisor</h3>
      <h4> &#8226; Apple, Inc.</h4>
      <p>&bull; Provided exceptional technical phone support for iOS products (iPhone, iPad, etc.) for AppleCare customers.</p>
      <p>&bull; Managed a wide variety of customer service and administrative tasks to resolve customer issues quickly and efficiently.</p>
      <p>&bull; Self-managed and worked independently in a fast-paced, constantly changing environment.</p>
      <h5>September 2016—April 2017&nbsp;&nbsp;&nbsp;&nbsp;Sacramento, CA
    </div>

    <h2>Education</h2>
      <div class="rule"></div>
      <div class="item">
        <h3>Bachelor <span class="of">of</span> Arts&nbsp;&nbsp;</h3>
        <h4>Photography</h4>
        <h5>California State University, Sacramento</h5>
      </div>

    <h2>Projects</h2>
    <div class="rule"></div>
    <div class="item">
      <h3><a href="http://quaranzines.cargo.site">Quaranzines</a></h3>
      <h4>&nbsp;&nbsp;CSU Sacramento</h4>
      <p>Quaranzines is a collaborative, online zine festival created by CSU Sacramento students and professors. I served as the website designer and digital asset manager for the project.</p>
      <h5>Web designer and digital asset manager</h5>
    </div>

    <div class="item">
      <h3><a href="https://github.com/cjgetty/pixeltools">Pixel Tools</a></h3>
      <h4>&nbsp;&nbsp;Personal</h4>
      <p>Pixel Tools is a free, open-source resource library for designers and creative teams.
</p>
      <h5>Designer & coder</h5>
    </div>

    <div class="item">
      <h3><a href="https://www.placeholdermag.com/index.html">Placeholder Magazine</a></h3>
      <p>Placeholder Magazine is a fiercely independent critical voice covering contemporary arts, culture, and literature in the Central Valley of California, led entirely by volunteers. I acted as assistant web designer and freelance contributor.</p>
      <h5>Assistant web designer and freelance contributor</h5>
    </div>

    <h2>Skills & Interests</h2>
    <div class="rule"></div>
    <div class="item">
      <h3>Skills&nbsp;&nbsp;</h3>
      <h4>
        <ul>
          <li>HTML/CSS</li>
          <li>Customer Servive</li>
          <li>Asana, Microsoft Teams, Slack, etc.</li>
          <li>Adobe Creative Suite</li>
          <li>Ability to Work Independently</li>
          <li>Microsoft Office</li>
          <li>Content Management Systems</li>
        </ul>
      </h4>

      <h3>Interests&nbsp;&nbsp;</h3>
      <h4>
        <ul>
          <li>Collecting records </li>
          <li>Film photography </li>
          <li>Art history </li>
          <li>Helping people ‍&lt;/li>
        </ul>
      </h4>
    </div>
  </div>

    <footer>
      <div class="container">
        <h3>Get in touch?</h3>
        <h4><a class="blue-link" href="mailto:cameronjgetty@gmail.com">cameronjgetty@gmail.com</a> / 209.981.8269</h4>
      </div>
    </footer>

</html>

标签： htmlcsslist

解决方案

删除这个 css ：

@media (min-width: 645px){

h4 ul {
    margin-right: 48px;
}
}

在屏幕截图中显示更改 截图

推荐阅读