如何在HTML/CSS中找到匹配元素的底部[重复]
是否可以将div中所有元素的底部对齐在一起？我有一个标题div，它将包含我的网站名称，以及一个小菜单。小菜单有3个链接，它们都在同一级别，但我有一个图像和一个svg标签（自定义购物车点），位于菜单链接上方一点。网站标题位于所有菜单上方。我当前的代码给我这个结果：
注意标题是如何位于右侧菜单上方的，而facebook图像和定制购物车是如何位于菜单上方的？我希望所有这些元素的底部能够匹配。这可能吗？
这是我当前的代码：
body {
background-color: rgb(225, 225, 225);
margin: 0px;
padding: 0px;
}
div#header {
background-color: rgb(255, 255, 255);
width: 100%;
height: 50px;
margin: 0px;
padding: 25px 0px 0px 0px;
position: fixed;
display: flex;
justify-content: space-between;
}
.title {
font-size: 20px;
padding: 0px 0px 0px 50px;
}
.menu {
font-size: 15px;
padding: 0px 50px 0px 0px;
}
.menu a {
padding: 0px 10px 0px 10px;
}
a {
color: rgb(0, 0, 0);
font-family: Sans-Serif;
text-decoration: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Home | pc.bracelet</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="header">
<span class="title"><a href="index.html">MYSITE</a></span>
<span class="menu">
<a href = "index.html">Home</a>
<a href = "shop.html">Shop</a>
<a style = "border:1px solid red;" href = "blog.html">Blog</a>
<a target = "_blank" href = "http://www.facebook.com/pc.bracelet"><img style = "border:1px solid red;" src = "facebookf.png" alt = "Find Us On FaceBook"/></a>
<a href = "checkout.html">
<svg height = "25px" width = "30px" style="border:1px solid red;">
<polyline points = "0,6 5,6 10,16 20,16 22,10" style="fill:none;stroke:black;stroke-width:1"/>
<circle cx = "12" cy = "20" r = "1.5" stroke = "black" stroke-width = "1" fill = "black"/>
<circle cx = "18" cy = "20" r = "1.5" stroke = "black" stroke-width = "1" fill = "black"/>
</svg>
</a>
</span>
</div>
</body>
</html>共有2个答案
svg是一个内联块元素，试图与菜单的基线相匹配。
只需添加一个垂直对齐：底部 到svg
这是可能的：）
尝试并在上使用flexbox。菜单，对齐它的子级。
对齐项目：居中 可能已经完成了，但您可以尝试使用底部或基线来决定哪种结果会产生所需的布局。
编辑：还添加了对齐项目：居中至#标题，以便更精确地对齐。
body {
background-color: rgb(225, 225, 225);
margin: 0px;
padding: 0px;
}
div#header {
background-color: rgb(255, 255, 255);
width: 100%;
height: 50px;
margin: 0px;
padding: 25px 0px 0px 0px;
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
font-size: 20px;
padding: 0px 0px 0px 50px;
}
.menu {
font-size: 15px;
padding: 0px 50px 0px 0px;
display: flex;
align-items: center;
}
.menu a {
padding: 0px 10px 0px 10px;
}
a {
color: rgb(0, 0, 0);
font-family: Sans-Serif;
text-decoration: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Home | pc.bracelet</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="header">
<span class="title"><a href="index.html">MYSITE</a></span>
<span class="menu">
<a href = "index.html">Home</a>
<a href = "shop.html">Shop</a>
<a style = "border:1px solid red;" href = "blog.html">Blog</a>
<a target = "_blank" href = "http://www.facebook.com/pc.bracelet"><img style = "border:1px solid red;" src = "facebookf.png" alt = "Find Us On FaceBook"/></a>
<a href = "checkout.html">
<svg height = "25px" width = "30px" style="border:1px solid red;">
<polyline points = "0,6 5,6 10,16 20,16 22,10" style="fill:none;stroke:black;stroke-width:1"/>
<circle cx = "12" cy = "20" r = "1.5" stroke = "black" stroke-width = "1" fill = "black"/>
<circle cx = "18" cy = "20" r = "1.5" stroke = "black" stroke-width = "1" fill = "black"/>
</svg>
</a>
</span>
</div>
</body>
</html>-
好的，所以我有一个正则表达式，我试图用它来匹配一些html文件中的特定模式。下面是preg_match语句： 明确地说，这是试图匹配一个id为{ { ALViewElement _ }的html元素。*}}但它也需要以结束标记结束，例如，如果$htmlElementType是“section ”,它将以“/section”结束 如果我的html看起来像这样，里面没有其他内容，那么它就如预期的那样工
-
我正在浏览一个基本上由ajax调用完全加载的网页，并包含了相应的等待： 该页面只包含一些表格和按钮，但我找不到任何带有Selenium的表格和按钮。我尝试了所有的find_element（）组合，但没有任何效果。 我尝试从页面获取html源代码： 但我唯一得到的是： 虽然当我检查它时，里面包含了很多
-
我已经制作了一个带有几何图形和for循环的表格，用于打印出直角图形的名称，但我想为这个图形打印一个符合条件的随机名称，如果可能的话，还可以创建另一个表格，其中只包含符合条件的图形。我试图使用，但我不知道怎么做。我将感谢你的帮助：
-
我有一个对象列表 现在我想找到B对象B的最后一个匹配项，使得B.x=1。我可以通过简单地运行for循环并更新每个匹配的索引来实现这一点。但在Java 8中如何做到这一点，我还不清楚。 我看到有Java 8 API用于查找findFirst（）和findAny（），但没有找到任何类似于查找最后一个事件的API。
-
问题内容： 我有一个复杂的html结构，其中包含许多表和div ..而且结构可能会更改。如何通过跳过两者之间的元素来查找xpath。例如 ： 我必须获取有关“名字”范围的输入元素 例如： 但是..我可以跳过htmls之间的内容并直接访问输入元素吗？ 问题答案： 您可以尝试以下Xpath： 说明： 选择元素： 然后在上方元素旁边获取元素： 然后在上面第二步中选择的元素内获取元素：
-
问题内容： 我有两个数组，我希望能够比较两个数组，只返回匹配的值。例如，两个数组都具有值，因此将返回该值。我还没找到这样的东西。返回相似度的最佳方法是什么？ 问题答案： 自然，我的方法是循环遍历第一个数组一次并检查第二个数组中每个值的索引。如果索引为，则将其添加到返回的数组中。 我的解决方案不像其他循环那样使用两个循环，因此它的运行速度可能会更快一些。如果要避免使用，则可以先对两个数组进行排序，以