如何在行内元素的空白空间中拉伸背景

Question

如何在行内元素的空白空间中拉伸背景

您好，StackOverflow社区！关于CSS设置页面样式时遇到的问题，我有一个问题，涉及可以用来在任何周围空白区域获取内联元素背景（例如，使用background: grey的技术）的问题它，而不会超出其内容指定的边界。举个例子，让我放一个片段：

body {
  margin: 0;
}

nav {
  position: relative;
  height: 10em;
}

ul {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  list-style-type: none;
  background: black;
  color: white;
  padding: 10px;
}

li {
  display: inline;
  padding: 10px;
  line-height: 6.5em;
  transition: background-color 0.5s ease-in-out 0s;
}

li:hover {
  background-color: darkgrey;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Example Snippet</title>
  </head>
  
  <body>
    <nav>
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
      </ul>
    </nav>
    
  </body>
</html>

在上面的示例中，我编写了一些代码来演示我遇到的问题。我不知道如何使背景大小达到容器的大小。有人知道有什么技术可以做到这一点吗？

Answer 1

如果我正确理解了您的问题，您是否希望li在其父容器中占用尽可能多的空间？如果是这样，我从您的代码中包含了JSFiddle。在其中，我从您的li和ul中删除了位置。并将display:inline-block添加到您的li元素中，以使它们可以添加填充，因为内联元素完全忽略填充。

这是小提琴，让我知道这是否是您想要的。

JSFiddle

Answer 2

如果您要谈论li的高度，则只需给ul一个display: flex;。

http://jsfiddle.net/Lmeoypgj/4/

Answer 3

我不确定这是否是您要寻找的，但是您可以创建li-class或id并使用旧的边框模型：

body {
  margin: 0;
}

nav {
  position: relative;
  height: 10em;
}

ul {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  list-style-type: none;
  
  
  color: white;
  padding: 10px;
}

.bgInside {
  background-color: black;
  display: inline;
  box-sizing: border-box;
  padding: 10px;
  line-height: 6.5em;
  transition: background-color 0.5s ease-in-out 0s;
}

li:hover {
  background-color: darkgrey;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Example Snippet</title>
  </head>
  
  <body>
    <nav>
      <ul>
        <li class="bgInside">Element 1</li>
        <li class="bgInside">Element 2</li>
      </ul>
    </nav>
    
  </body>
</html>

如何在空白空间中拉伸背景

如何在行内元素的空白空间中拉伸背景

3 个答案: