Question

这是我的css代码我应该添加什么来减少链接的大小，其中只是单词是可点击的链接？

<style>


ul { 

list-style-type: none;

}

li {
    float: center;
}

li a {
    display: block;
    color: Black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
text-decoration: underline;
    background-color: #6CCFFFb1;
}

.active {
    background-color: #6CCFFF ;
}
</style>
</head>

我已经阅读了一些内容，但我添加的大多数代码都没有使用或扭曲网页图像。

<!DOCTYPE html>

<head>
    <title>Andis Place</title>
    <link rel="stylesheet" type="text/css"href="stylesheet.css"/>

    </head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <body style="font-family:Courier New;" bgcolor="White"
    <head>
            <h1 style="color:Orange;"> <center>Welcome to Andis Place</center></h1>
        </head>
    </body>

    <body>
    <p style="font-size:15px;">Enjoy… </p>
   <!DOCTYPE html>
  <html>


<body>


<ul style="list-style-type:none">

  <li class="external-link">
          <a href="https://soundcloud.com/palomazee" target="_blank">Soundcloud</a>
        </li>
 <li class="external-link">
          <a href="" target="_blank">Shop</a>
        </li>
  <li class="external-link">
          <a href="" target="_blank">Photos</a>
        </li>
  <li class="external-link">
          <a href="" target="_blank">About Me</a>
        </li>
</ul>

</body>




<body>

</body>












</html>

这是我的HTML代码。

Answer 1

移动你浮动的地方。

改变你的风格：

ul { 
    list-style-type: none;
}

li {
    float: center;
}

li a {
:
:

对此：

ul { 
  list-style-type: none;
  float: center
}

li a {
    display: block;
    color: Black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

:
:

请注意，我完全删除了“li”样式...还删除了UL标签本身的样式应用程序。 CSS就足够了。

Answer 2

我建议您在尝试修复此问题时花些时间处理一些html和css基础知识。我看到你的标记和样式中有很多错误，虽然它们可能与这个特定问题无关，但是确实难以隔离你想要修改的这种行为。 Mozilla HTML introduction是一个很好的起点。

特别要确保HTML文档的结构正确。只有一个body标记，head标记中没有显示内容，正确的开始和结束标记集等。关注这些基础知识可以使代码调试变得更加容易（对于您和其他人）。

您还尝试使用实际不存在的值设置一些css属性，例如float:center。

至于您所看到的这种特殊行为，发生这种情况是因为它是块级元素100％填充其容器的默认行为。因此，您的列表项目在屏幕上一直延伸，您也设置了锚点元素display: block，因此它们在屏幕上一直延伸。尝试从锚元素中删除display:block和text-align:center，而只需在li上设置text-align: center。（没有必要在display: block上设置li，因为这是默认值。

You can see a very simple example here in this codepen.

减少链接可点击区域的大小？

2 个答案: