Question

Fiddle: https://jsfiddle.net/jzhang172/xkryh20s/

a{
 display:block;
}
a:hover{
  background:black;
}

<a href="something">Link 1</a>
<a href="something">Link 2</a>
<a href="something">Link 3</a>
<a href="something">Link 4</a>

正如您所看到的，链接占据了整个宽度，但我希望它只占用实际单词的长度而不说明“width：100px”或其他数字。

Answer 1

我希望它只占用实际单词的长度而不说明＆＃34;宽度：100px＆＃34;或其他一些数字

如果是这样，最好保持链接内联。

＆＃13;

a:hover{
    background:black;
}

＆＃13;

<div>
    <a href="something">Link 1</a>
</div>
<div>
    <a href="something">Link 2</a>
</div>
<div>
    <a href="something">Link 3</a>
</div>
<div>
    <a href="something">Link 4</a>
</div>

＆＃13;

Answer 2

我认为你可能只需要做到display:inline-block; - 也许不会让它成为无序列表;我刚刚添加了一些额外的CSS来修复格式化。

＆＃13;

a{
 display:inline-block;
 padding:5px;
}
a:hover{
  background:black;
  color:white;
}

ul {
  padding-left:0px;
}

ul li {
  list-style:none;
  display: inline-block;
  clear: left;
  float: left;
}

＆＃13;

<ul>
<li><a href="something">Link 1</a></li>
<li><a href="something">Link 2</a></li>
<li><a href="something">Link 3</a></li>
<li><a href="something">Link 4</a></li>
</ul>

＆＃13;

Answer 3

只需更改代码，我就会说display:table;

Fiddle Example

a{
 display: table;

}
a:hover{
  background:black;
}

Answer 4

默认情况下，块的宽度为fill-available。您似乎想要fit-content。

你可以

使用width: fit-content。没有得到广泛支持，某些浏览器可能需要供应商前缀。

＆＃13;

a {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
a:hover {
  background: black;
}

＆＃13;

<a href="something">Link 1</a>
<a href="something">Link 2</a>
<a href="something">Link 3</a>
<a href="something">Link 4</a>

＆＃13;

使用display: inline-block。默认情况下，它们的宽度为fit-content，但请注意它们是内联级别的。您可能需要插入其他元素以强制换行。

＆＃13;

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  display: inline-block;
}
a:hover {
  background: black;
}

＆＃13;

<ul>
  <li><a href="something">Link 1</a></li>
  <li><a href="something">Link 2</a></li>
  <li><a href="something">Link 3</a></li>
  <li><a href="something">Link 4</a></li>
</ul>

＆＃13;

使用float: left; clear: left。默认情况下，浮动元素的宽度为fit-content。您需要清除以防止它们水平堆叠。请注意它们将变得不流动，因此请考虑使用clearfix或在父级上建立块格式化内容。

＆＃13;

div {
  overflow: hidden; /* Establish block formatting context */
}
a {
  float: left;
  clear: left;
}
a:hover {
  background: black;
}

＆＃13;

<div>
  <a href="something">Link 1</a>
  <a href="something">Link 2</a>
  <a href="something">Link 3</a>
  <a href="something">Link 4</a>
</div>

＆＃13;

display: table。这有点像hacky，但它的块级和宽度算法通常类似于fit-content（请注意它依赖于实现）。

＆＃13;

a {
  display: table;
}
a:hover {
  background: black;
}

＆＃13;

<a href="something">Link 1</a>
<a href="something">Link 2</a>
<a href="something">Link 3</a>
<a href="something">Link 4</a>

＆＃13;

将a放入fit-content宽度

的包装中

＆＃13;

div {
  display: inline-block; /* fit-content width */
}
a {
  display: block;
}
a:hover {
  background: black;
}

＆＃13;

<div>
  <a href="something">Link 1</a>
  <a href="something">Link 2</a>
  <a href="something">Link 3</a>
  <a href="something">Link 4</a>
</div>

＆＃13;

Answer 5

display:block;属性正在执行此操作 - 块元素（如<div> s）将自动消耗其父级宽度的100％。您可以将链接包装在样式化的无序列表中，以产生所需的效果：

CSS：

ul{
  list-style-type:none;
  padding:0;
  margin:0;
}
a:hover{
  background:black;
}

HTML：

<ul>
  <li><a href="something">Link 1</a></li>
  <li><a href="something">Link 2</a></li>
  <li><a href="something">Link 3</a></li>
  <li><a href="something">Link 4</a></li>
</ul>

小提琴：https://jsfiddle.net/f2L4tk43/

Answer 6

以这种方式尝试：

https://jsfiddle.net/xkryh20s/11/

a{
 display:block;

}
a:hover{
  background:black;
  display: inline-block;
}

Answer 7

如果你不害怕使用伪元素，你可以这样做：

a:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

请参阅回答In CSS, what is a better way of forcing a line break after an element than making it a block element?

Answer 8

默认情况下，链接为inline，因此删除display:block会将其缩小到自己的宽度。

在此之后你如何安排他们是另一个问题。

＆＃13;

a {
  background: red;
}
a:hover {
  background: black;
}

＆＃13;

<a href="something">Link 1</a>
<a href="something">Link 2</a>
<a href="something">Link 3</a>
<a href="something">Link 4</a>

＆＃13;

设置<a href=""> width as Link length without specifying specific length

8 个答案: