flexbox 相关问题

CSS3模块提供灵活的布局，提供了广泛的对齐元素选项，同时无需浮动和表格。

牙科样本页面示例 HTML：牙科页面 ... 示例 HTML： <header id="banner"> <h1>Dentistry Page</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Services/services.html">Services</a></li> <li><a href="About/about.html">About</a></li> <li><a href="Contact/contact.html">Contact</a></li> </ul> </nav> </header> CSS 示例： header { background-image: url(Images/Homepage-Feature-Image-Mobile.jpg); height: 250px; background-repeat: no-repeat; background-position: center; margin: 1em; padding: 1em; grid-area: header; } nav ul { margin: 0px; padding: 0px; list-style-type: none; display: flex; justify-content: center; align-items: flex-end; } nav ul li a { display: block; border: 1px solid; border-radius: .5em; padding: .25em; margin: .5em; } 到目前为止，我在尝试了几种不同的组合后得到了上面的代码。我试图将导航菜单置于背景图像下方，但仍在标题元素内。我尝试了几种不同的风格，但发现这最接近我正在寻找的风格。代码可能很混乱，因为这是我的第一个项目，我刚刚学习，但我似乎无法在任何地方找到答案。我希望将菜单放在背景图片下方。如果容器内有一个元素（例如 div 或 header），并且您将背景应用于该容器，则只要该元素位于该容器中，就无法将该元素移动到背景下方。如果您想将导航栏保留在标题内，则必须在标题内创建一个专门应用背景的 div，然后该 div 之后的任何内容都将显示在下方。 <header id="banner"> <div id='background'> <h1>Dentistry Page</h1> </div> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Services/services.html">Services</a></li> <li><a href="About/about.html">About</a></li> <li><a href="Contact/contact.html">Contact</a></li> </ul> </nav> </header> #background { background-image: url(Images/Homepage-Feature-Image-Mobile.jpg); height: 250px; background-repeat: no-repeat; background-position: center; margin: 1em; padding: 1em; grid-area: header; } nav ul { margin: 0px; padding: 0px; list-style-type: none; display: flex; justify-content: center; align-items: flex-end; } nav ul li a { display: block; border: 1px solid; border-radius: .5em; padding: .25em; margin: .5em; }

html css flexbox background-image display

回答 1 投票 0

2 个弹性容器并排显示

在 .maroon 部分内，我有两个 .whitewrap 部分。我想知道为什么它不换行到另一行并并排显示它们。表格应位于文本下方，并且

html css flexbox word-wrap

回答 2 投票 0

在 Flex 环境中像 div 一样行，开头有旋转标题

目标最终我想要得到这样的东西（忘记周围的白色边框是由于剪切造成的）：约束条件这些元素必须位于以下标记内，但我不能...

html css flexbox

回答 2 投票 0

仅当弹性项目达到最小宽度时才会换行

所以我有这个：。菜单 { 显示：柔性；对齐项目：居中；调整内容：居中； /* flex-wrap: 包裹; → 只有当孩子们达到最小宽度时我才想要这个，以避免水平