html - 更改为较小的屏幕时，无法使网站内容以与桌面 View 相同的方式对齐

标签 html css css-grid

我希望我的导航按钮在通过手机查看时水平对齐，所有框都对齐，就像在手机上使用时每行有 4 列一样。现在它是一个响应站点，但导航菜单上的所有框和按钮都垂直对齐以进行调整。但我想要的是，在较小的屏幕上，按钮和框会改变大小但保持相同的对齐方式，即每行 4 列。

样式.css

  :root {
 --primary: #ddd;
 --dark: #333;
 --light: #fff;
 --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}
html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: var(--dark);
}

 body {
  background: #ccc;
 margin: 30px 50px;
 line-height: 1.4;
 }

 .btn {
 background: var(--dark);
 color: var(--light);
 padding: 0.6rem 1.3rem;
 text-decoration: none;
 border: 0;
 }

img {
 max-width: 100%;
 }

 .wrapper {
 display: grid;
 grid-gap: 20px;
}

  /* Navigation */
 .main-nav ul {
 display: grid;
  grid-gap: 20px;
 padding: 0;
 list-style: none;
 grid-template-columns: repeat(4, 1fr);
}

 .main-nav a {
 background: var(--primary);
 display: block;
 text-decoration: none;
 padding: 0.8rem;
 text-align: center;
 color: var(--dark);
 text-transform: uppercase;
 font-size: 1.1rem;
 box-shadow: var(--shadow);
 }

 .main-nav a:hover {
 background: var(--dark);
 color: var(--light);
  }

 /* Top Container */
 .top-container {
 display: grid;
 grid-gap: 10px;
 grid-template-areas:
  'showcase showcase top-box-a'
  'showcase showcase top-box-b';
 }

 /* Showcase */
 .showcase {
  grid-area: showcase;
  min-height: 400px;
   background: url(https://image.ibb.co/kYJK8x/showcase.jpg);
  background-size: cover;
  background-position: center;
  padding: 3rem;
  display: flex;
  flex-direction: column;
 align-items: start;
 justify-content: center;
 box-shadow: var(--shadow);
 }

 .showcase h1 {
 font-size: 4rem;
 margin-bottom: 0;
  color: var(--light);
}

 .showcase p {
 font-size: 1.3rem;
 margin-top: 0;
 color: var(--light);
 }

  /* Top Box */
 .top-box {
 background: var(--primary);
 display: grid;
 align-items: center;
 justify-items: center;
 box-shadow: var(--shadow);
 padding: 1rem;
 }

 .top-box .price {
 font-size: 2.5rem;
 }

.top-box-a {
 grid-area: top-box-a;
}

 .top-box-b {
 grid-area: top-box-b;
}

 /* Boxes */
 .boxes {
 display: grid;
 grid-gap: 10px;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 /* grid-template-columns: repeat(6, 200px);  */
 }

 .box {
 background: var(--primary);
 text-align: center;
 padding: 0.5rem 1rem;
 box-shadow: var(--shadow);
 }

 /* Info */
.info {
background: var(--primary);
box-shadow: var(--shadow);
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(2, 1fr);
padding: 3rem;
}

/* Portfolio */
.portfolio {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.portfolio img {
width: 100%;
box-shadow: var(--shadow);
}

 /* Footer */
 footer {
 margin-top: 2rem;
 background: var(--dark);
 color: var(--light);
 text-align: center;
 padding: 1rem;
 }

 /* Media Queries */
 @media (max-width: 700px) {
  .top-container {
   grid-template-areas:
    'showcase showcase'
    'top-box-a top-box-b';
  }

  .showcase h1 {
  font-size: 2.5rem;
 }

  .main-nav ul {
   grid-template-columns: 4fr;
 }

 .info {
   grid-template-columns: 4fr;
 }

 .info .btn {
  display: block;
  text-align: center;
  margin: auto;
 }
}

@media (max-width: 500px) {
.top-container {
 grid-template-areas:
   'showcase'
   'top-box-a'
   'top-box-b';
  }
 }

html

  <body>
<div class="wrapper">
    <!-- Navigation -->
    <nav class="main-nav">
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </nav>

    <!-- Top Container -->
    <section class="top-container">
      <header class="showcase">
        <h1>Your Web Presence</h1>
        <p>Lorem ipsum dolor s</p>
        <a href="#" class="btn">Read More</a>
      </header>
      <div class="top-box top-box-a">
        <h4>GENERAL KNOWLEDGE</h4>
        <p class="price">$199/mo</p>
        <a href="" class="btn">Buy Now</a>
      </div>
      <div class="top-box top-box-b">
        <h4>BOLLYWOOD</h4>
        <p class="price">$299/mo</p>
        <a href="" class="btn">Buy Now</a>
      </div>
    </section>

    <!-- Boxes Section -->
    <section class="boxes">
      <div class="box">
        <i class="fas fa-chart-pie fa-4x"></i>
        <h3>Analytics</h3>
        <p>Lorem ipsum dolor s</p>
      </div>
      <div class="box">
        <i class="fas fa-chart-pie fa-4x"></i>
        <h3>Analytics</h3>
        <p>Lorem ipsum dolor </p>
      </div>
      <div class="box">
        <i class="fas fa-chart-pie fa-4x"></i>
        <h3>Analytics</h3>
        <p>Lorem ipsum </p>
      </div>
      <div class="box">
        <i class="fas fa-chart-pie fa-4x"></i>
        <h3>Analytics</h3>
        <p>Lorem ipsum dol</p>
      </div>
      <div class="box">
        <i class="fas fa-chart-pie fa-4x"></i>
        <h3>Analytics</h3>
        <p>Lorem ips</p>
      </div>

最佳答案

老实说，我认为处理导航栏的更好方法是简单地通过内联 block 样式元素，例如:

html {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--dark);
  padding: 0;
  margin: 0;
}

body {
  background: #ccc;
  line-height: 1.4;
  padding: 0;
  margin: 0;
}

h1 {
  padding: 0;
  margin: 0;
}

.btn {
  background: var(--dark);
  color: var(--light);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
}

img {
  max-width: 100%;
}


/* Navigation */

.main-nav ul {
  width: 100%;
  display: block;
  white-space: nowrap;
  background-color: gray;
  padding: 0;
}

.main-nav ul li {
  display: inline-block;
  width: 25%;
  text-align: center;
}

.main-nav a {
  display: block;
  padding: 20px 0;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
}
<div class="wrapper">
  <!-- Navigation -->
  <nav class="main-nav">
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Services</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
  <!-- Top Container -->
  <section class="top-container">
    <header class="showcase">
      <h1>Your Web Presence</h1>
      <p>Lorem ipsum dolor s</p>
      <a href="#" class="btn">Read More</a>
    </header>
    <div class="top-box top-box-a">
      <h4>GENERAL KNOWLEDGE</h4>
      <p class="price">$199/mo</p>
      <a href="" class="btn">Buy Now</a>
    </div>
    <div class="top-box top-box-b">
      <h4>BOLLYWOOD</h4>
      <p class="price">$299/mo</p>
      <a href="" class="btn">Buy Now</a>
    </div>
  </section>

  <!-- Boxes Section -->
  <section class="boxes">
    <div class="box">
      <i class="fas fa-chart-pie fa-4x"></i>
      <h3>Analytics</h3>
      <p>Lorem ipsum dolor s</p>
    </div>
    <div class="box">
      <i class="fas fa-chart-pie fa-4x"></i>
      <h3>Analytics</h3>
      <p>Lorem ipsum dolor </p>
    </div>
    <div class="box">
      <i class="fas fa-chart-pie fa-4x"></i>
      <h3>Analytics</h3>
      <p>Lorem ipsum </p>
    </div>
    <div class="box">
      <i class="fas fa-chart-pie fa-4x"></i>
      <h3>Analytics</h3>
      <p>Lorem ipsum dol</p>
    </div>
    <div class="box">
      <i class="fas fa-chart-pie fa-4x"></i>
      <h3>Analytics</h3>
      <p>Lorem ips</p>
    </div>
  </section>
</div>

它现在应该在同一行中包含所有四个元素，无论屏幕大小如何。不过，随着屏幕缩小，您可能需要更改字体大小。

附言抱歉造成任何误解或虚假陈述，这是我第一次写问题的答案。希望对您有所帮助!

关于html - 更改为较小的屏幕时，无法使网站内容以与桌面 View 相同的方式对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49417428/

上一篇：html - 如何从子目录中包含/链接 css(和 html)？

下一篇：html - 英雄形象的底部曲线

相关文章：

css - 如何用jss指定网格模板

jquery - CSS 创建一个透明的div

javascript - 限制html输入框内的字符串只能是状态缩写

html - 在 <a> 悬停时更改背景颜色

html - 幻灯片无法正常工作

javascript - 如何在剪刀石头布游戏中创建记分牌

html - 垂直和水平居中 div 而不会弄乱 div 动画？

CSS 网格 : centering and overlapping difficulties

css - 当每一行都包裹在自己的容器 div 中时，可以使用 CSS 网格吗？

javascript - 展示类(class)形象 10 秒

©2024 IT工具网  联系我们