时间戳

首页 > 解决方案 > 固定宽度并使其响应

html - 固定宽度并使其响应

问题描述

我有一个 ul，里面有 3 li。使用 display: flex, justify-content: space-between 和一些填充和边距，它看起来正是我想要的。

我还有 2 件事情，我从几个小时以来就一直在尝试做这些事情，但它不起作用。

  1. li 元素应该有一个固定的宽度。固定宽度有效，但是当我缩小窗口时，li 元素的宽度缩小到页面大小，并且它们保持在同一行。

  2. 我希望宽度是固定的，当我缩小窗口时，根据窗口大小，li 元素应该排成 2 或 3 行（用于移动视图）

我希望它很容易理解...

这是我的代码：

.content-wrapper {
    ul {
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding: 0 1em;

        li {
            margin-right: 2.5em;
            width: 350px;
            max-width: 350px;
        }
        li:last-child {
            margin-right: 0;
         }
    }
}
<div class="content-wrapper">
        <div class="wrapper">
            <ul>
                <li>
                    <h1 class="content-title">
                        Über die Zahnarztpraxis
                    </h1>
                    <p class="content-text">
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </li>
                <li>
                    <h1 class="content-title">Öffnungszeiten</h1>
                    <p class="content-text">
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </li>
                <li>
                    <h1 class="content-title">Kontakt</h1>
                    <p class="content-text">
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </li>
            </ul>
        </div>
    </div>

标签： htmlcss

解决方案

将您的项目设置min-width为我在评论中建议的。

并将您的flexbox .content-wrapper ul项目设置为flex-wrap: wrap; 这会将它们堆叠/包装在不同的屏幕尺寸上。

* {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: 'Tajawal', sans-serif;
  color: #141414;
}

.header-wrapper {
  background-color: #e0e0e0;
  -webkit-box-shadow: 0px 4px 5px -2px #b8b8b8;
          box-shadow: 0px 4px 5px -2px #b8b8b8;
  padding: 1.5em 0;
}

.wrapper {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5em;
}

a {
  text-decoration: none;
  color: #141414;
  cursor: pointer;
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-height: 80px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

header .logo {
  font-size: 1.8em;
  font-weight: 400;
  padding-left: 0.5em;
}

header ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header ul li a {
  padding: .5em 1em;
  text-transform: uppercase;
  font-size: 1.1em;
  font-weight: 500;
}

header ul li a:hover {
  color: #f0853e;
}

header ul li a:focus {
  color: #f0853e;
}

header ul li.nav-links {
  margin: 0 .1em;
}

.header-image {
  margin: 1em auto;
  padding: 0 auto;
  display: block;
}

.header-image img {
  width: 100%;
  padding: 0 auto;
  border-bottom: #f0853e;
  border-bottom-style: solid;
}

h1.content-title {
  color: #f0853e;
  font-size: 1.8em;
  font-weight: 600;
  margin-bottom: 7px;
}

p.content-text {
  color: #141414;
  font-size: 18px;
  font-weight: 400;
}

.content-wrapper ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
  padding: 0 1em;
  flex-wrap: wrap;
}

.content-wrapper ul li {
  margin-right: 2.5em;
  width: 350px;
  min-width: 350px;
}

.content-wrapper ul li:last-child {
  margin-right: 0;
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
 <body>
    <div class="header-wrapper">
        <div class="wrapper">
            <header>
                <a href="#" class="logo">Zahnarztpraxis Dr. Beuran</a>
                <ul>
                    <li class="nav-links">
                        <a href="#">Home</a>
                    </li>
                    <li class="nav-links">   
                        <a href="#">Dienstleistungen</a>
                    </liclass="nav-links">
                    <li class="nav-links">
                        <a href="#">Über uns</a>
                    </li>
                    <li class="nav-links">
                        <a href="#">Team</a>
                    </li>
                    <li class="nav-links">
                        <a href="#">Standort</a>
                    </li>
                    <li class="nav-links">
                        <a href="#">Kontakt</a>
                    </li>
                </ul>
            </header>
        </div>
    </div>
    <div class="header-image">
        <div class="wrapper">
            <img src="http://derderic.ch/project/img/home.jpg" alt="Home">
        </div>
    </div>
    <div class="content-wrapper">
        <div class="wrapper">
            <ul>
                <li>
                    <h1 class="content-title">
                        Über die Zahnarztpraxis
                    </h1>
                    <p class="content-text">
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </li>
                <li>
                    <h1 class="content-title">Öffnungszeiten</h1>
                    <p class="content-text">
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </li>
                <li>
                    <h1 class="content-title">Kontakt</h1>
                    <p class="content-text">
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

推荐阅读