html Flexbox与图像和导航菜单对齐

kkbh8khc 于 2023-08-01 发布在其他

关注(0)|答案(1)|浏览(110)

x1c 0d1x的数据
完成后，解决方案应如上图所示。
我需要一些关于flexbox的帮助。我只是在学习，有些事情被卡住了，希望有人能提供一些指导。我只使用HTML和CSS创建一个页面标题。在这个标题我有3个不同的子项目
1.左对齐徽标的跨度
1.我想立即出现在徽标右侧的两行文本[标题和副标题]的跨度和
1.问题子，一个导航菜单[水平，没有下拉]，需要出现在整个页面的中心，并与徽标和标题内联。
这里是一些工作代码，只是似乎不能得到它的权利。感谢任何帮助

home.html

<!doctype html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<head>
<link rel="stylesheet" href="css/page-header.css">
</head>
<body>
<span w3-include-html="page-header.html"></span>
<script>
w3IncludeHTML()
</script>
</body>
</html>

字符串

页面标题.html

<span class="header-box">
<img class="header-logo" src="images\logo.svg" />
<span class="header-title">Company Title</span>
<span class="header-subtitle">best products</span>
<ul class="header-menu">
<li class="nav-link"><a href="#">Home</a></li>
<li class="nav-link"><a href="#">Gallery</a></li>
<li class="nav-link"><a href="#">Locations</a>/li>
<li class="nav-link"><a href="#">About</a></li>
</ul>
</span>

型

page-header.css

@import url("https://use.typekit.net/xul0ipk.css");
.header-box {
padding: 0.5rem;
background-color: beige;
display: flex;
flex-flow: column nowrap;
justify-items: center;
align-items: center;
}
.header-logo {
display: flex;
flex-flow: inherit;
align-self: flex-start;
width: clamp(3.12rem, 2.8692rem + 2.674vw, 6.88rem);
background-color: blue;
}
.header-box span {
flex-flow: row;
display: inline-flex;
align-self: flex-start;
background-color: aliceblue;
}
.header-title {
display: flex;
}

型
提前感谢！！！
它应该看起来像这样

Html

来源：https://stackoverflow.com/questions/76765820/flexbox-alignment-with-image-and-nav-menu

1条答案

按热度按时间

xwmevbvl1#

仅使用A Complete Guide to Flexbox，我做了一个粗略的，修改后的版本，你的代码如下。flex属性（由flex-grow、flex-shrink和flex-basis组成）是您在需要将内联flex元素居中时最好的朋友！

@import url("https://use.typekit.net/xul0ipk.css");
.header-container {
  width: 100%;
  background-color: rgba(142,195,221,0.5);
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.header-column1 {
  flex: 30%;
  padding: 10px;
  gap: 10px;
  display: inherit;
  flex-flow: inherit;
  align-self: flex-start;
  align-items: inherit;
}

.header-column1-img {
  flex: 50%;
}

.header-column1-img img {
  width: 100%;
}

.header-column1-title {
  flex: 50%;
  gap: 5px;
  display: flex;
  flex-direction: column;
}

.header-column2 {
  flex: 40%
  justify-content: center;
  gap: 20px;
  display: inline-flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  padding: 0;
  margin: 0;
  align-items: inherit;
}

.header-column2 li {
  list-style-type: none;
}

.header-column3 {
  flex: 30%;
}

个字符

赞(0）回复(0）举报 2023-08-01

我来回答

html Flexbox与图像和导航菜单对齐

1条答案

相关问题

热门标签

最新问答