Question

https://jsfiddle.net/yLrnp1x2/在这个小提琴中，我有一个span元素，我想给出一个负的上边距。除了为跨度定义display:block;之外，我似乎无法取得任何其他成功，演示将说明这显然是无用的。

选择用于填充菜单div的元素，包括跨度，避风港，已被给予任何特殊的思考，并且可以更改为任何可以实现相同结果的元素。我怎样才能做到这一点？

＆＃13;

.outer {
  background-color: blue;
  padding: 10px;
}

.label {
  background-color: azure;
  float: left;
  width: 60%;
}

.menu {
  text-align: right;
  background-color: burlywood;
  /* margin: 3px; */
  /* padding-top: -5px; */
}

.menu a {
  background-color: blueviolet;
  cursor: pointer;
  /* padding-top: 10px; */
}

.menu span {
  background-color: green;
  /* display: inline-block; */
  margin-top: -5px;
}

＆＃13;

<div class='outer'>
  <div class='label'>
    Some model
  </div>
  <div class='menu'>
    <a>Edit</a>
    <span>&nbsp;|&nbsp;</span>
    <a>Delete</a>
  </div>
</div>

＆＃13;

Answer 1

看起来您正在尝试修复标准栏|字符的对齐方式，该字符在HTML中显示得稍低一些。您可以使用绘图垂直条代替。为此，您可以使用其实体&boxv;或其代码│。保证代码可以正常工作，但所有浏览器可能都不支持该实体。

＆＃13;

.outer {
  background-color: blue;
  padding: 10px;
}

.label {
  background-color: azure;
  float: left;
  width: 60%;
}

.menu {
  text-align: right;
  background-color: burlywood;
}

.menu a {
  background-color: blueviolet;
  cursor: pointer;
}

.menu span {
  background-color: green;
}

＆＃13;

<div class='outer'>
  <div class='label'>
    Some model
  </div>
  <div class='menu'>
    <a>Edit</a>
    <span>&nbsp;&#9474;&nbsp;</span> <!-- or <span>&nbsp;&boxv;&nbsp;</span> -->
    <a>Delete</a>
  </div>
</div>

＆＃13;

或者，更常见的是使用边框。像这样：

＆＃13;

.outer {
  background-color: blue;
  padding: 10px;
}

.label {
  background-color: azure;
  float: left;
  width: 60%;
}

.menu {
  text-align: right;
  background-color: burlywood;
}

.menu a {
  background-color: blueviolet;
  cursor: pointer;
  padding-right: 3px;
  border-right: 1px solid #000;
}

.menu a:last-child {
  border-right: none;
}

＆＃13;

<div class='outer'>
  <div class='label'>
    Some model
  </div>
  <div class='menu'>
    <a>Edit</a>
    <a>Delete</a>
  </div>
</div>

＆＃13;

Answer 2

试试这个：为span元素设置position: absolute;。您还可以使用伪类:before将分隔符放在最后a元素之前。这是一种更好的语义编码方式

.outer {
  background-color: blue;
  padding: 10px;
}

.label {
  background-color: azure;
  float: left;
  width: 60%;
}

.menu {
  text-align: right;
  background-color: burlywood;
  /* margin: 3px; */
  /* padding-top: -5px; */
}

.menu a {
  background-color: blueviolet;
  cursor: pointer;
  /* padding-top: 10px; */
}

.menu a:last-child {
  margin-left: 15px;
}

.menu span {
  background-color: green;
  margin-top: -2px;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>

  <style>

  </style>

</head>
<body>
	
<div class='outer'>
  <div class='label'>
    Some model
  </div>
  <div class='menu'>
    <a>Edit</a>
    <span>&nbsp;|&nbsp;</span>
    <a>Delete</a>
  </div>
</div>

<script>


</script>

</body>
</html>

如何将负边距应用于内联块？

2 个答案: