问未排序的列表不会在一行中展开
EN

Stack Overflow用户

提问于 2021-04-24 00:05:56

回答 1查看 33关注 0票数 0

问题是我不能像这样显示未排序的列表：

codepen

.head {
    grid-area: header;
    padding: 20px;
    font-size: 30px;
    text-align: left;
   
    
}
.content {
    grid-area: content;
    
    

}
.nav {
    grid-area: nav;

    
}
.side {
    grid-area: sidebar;
}
.footer {
    grid-area: footer;
}


.wrapper {
    /* hier die allgemeine grid-Konfiguration einfügen */
    display: grid;
    grid-template-columns: 200px auto auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
        "header header header"
        "nav nav nav"
        "sidebar content content"
        "footer footer footer";

   grid-gap: 10px;
    
    
}

.wrapper > div, header, nav, article, aside, footer {
    
     background-color: gray;
        border: 2px solid black;

}

@media (min-width: 500px) {
    /* hier die Anpassungen für Geräte mit geringer Auflösung einfügen */
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Grid Layout</title>
  <link rel="stylesheet" href="grid.css" type="text/css">
</head>

<body>
  <div class="wrapper">
    <header class="head">The header</header>
    <nav class="nav">
      <ul>
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
      </ul>
    </nav>
    <article class="content">
      <h1>Main Article</h1>
      <p>
        In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the
        form of the content before the content itself has been produced.
      </p>
      <p>
        The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed to make it nonsensical, improper Latin.
      </p>
      <p>
        A variation of the ordinary lorem ipsum text has been used in typesetting since the 1960s or earlier, when it was popularized by advertisements for Letraset transfer sheets. It was introduced to the Information Age in the mid-1980s by Aldus Corporation,
        which employed it in graphics and word-processing templates for its desktop publishing program PageMaker.
      </p>
    </article>
    <aside class="side">Sidebar</aside>
    <footer class="footer">The footer</footer>
  </div>
</body>

</html>

html

css

回答 1

Stack Overflow用户

发布于 2021-04-24 00:12:39

基本上，您需要使用flex来显示菜单和列表元素的样式。你只需要添加：

.nav ul {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.nav ul li {
  padding: 0.5em;
  list-style-type: none;
  text-align: center;
}

.head {
    grid-area: header;
    padding: 20px;
    font-size: 30px;
    text-align: left;
}

.content {
    grid-area: content;
}

.nav {
    grid-area: nav;
}

.nav ul {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.nav ul li {
  padding: 0.5em;
  list-style-type: none;
  text-align: center;
}

.side {
    grid-area: sidebar;
}

.footer {
    grid-area: footer;
}

.wrapper {
    /* hier die allgemeine grid-Konfiguration einfügen */
    display: grid;
    grid-template-columns: 200px auto auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
        "header header header"
        "nav nav nav"
        "sidebar content content"
        "footer footer footer";

   grid-gap: 10px;
}

.wrapper > div, header, nav, article, aside, footer {
    
     background-color: gray;
        border: 2px solid black;

}

@media (min-width: 500px) {
    /* hier die Anpassungen für Geräte mit geringer Auflösung einfügen */
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Grid Layout</title>
  <link rel="stylesheet" href="grid.css" type="text/css">
</head>

<body>
  <div class="wrapper">
    <header class="head">The header</header>
    <nav class="nav">
      <ul>
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
      </ul>
    </nav>
    <article class="content">
      <h1>Main Article</h1>
      <p>
        In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the
        form of the content before the content itself has been produced.
      </p>
      <p>
        The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed to make it nonsensical, improper Latin.
      </p>
      <p>
        A variation of the ordinary lorem ipsum text has been used in typesetting since the 1960s or earlier, when it was popularized by advertisements for Letraset transfer sheets. It was introduced to the Information Age in the mid-1980s by Aldus Corporation,
        which employed it in graphics and word-processing templates for its desktop publishing program PageMaker.
      </p>
    </article>
    <aside class="side">Sidebar</aside>
    <footer class="footer">The footer</footer>
  </div>
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67233381

复制

相似问题

问未排序的列表不会在一行中展开
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未排序的列表不会在一行中展开EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未排序的列表不会在一行中展开
EN