个人中心
gpt4 book ai didi

html - 不必要的下划线

转载 作者：行者123 更新时间：2023-11-27 23:34:57 24 4
gpt4 key购买 nike

这是我的 fiddle code .为什么最后一个 ul 会影响左边的段落。

这里是如何格式化 html 的摘录，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <title>Thanks for playing!</title>
    <link href="thank-you-player.css" rel="stylesheet" />
</head>

<body>


    <!-- ideal size for compassion forward logo, width="250" height="120" -->


        <div class="list"><br><br><br>
        <ul>
          <li><a href="index.html"><span>Home</span></li>
          <li><a href="sponsor-form.php"><span>Sponsor</span></li>
          <li><a href="player-form.php"><span>Player</span></li>
          <li class="hide" style="display:none;"><a href="#"><span>Hidden</span></li>
        </ul>
        </div>

        <div style="display:none">
        The quick brown fox jumps over the head of the lazy dog.
        </div>


        <div class="info">

        <p><br><br><br>The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>



    <footer></footer>
</body>

</html>

如果可以，请帮我看看 fiddle 代码。

最佳答案

您缺少结尾 </a> 

@import url('https://fonts.googleapis.com/css?family=Dosis&display=swap');
ul {
  padding: 0;
  list-style-type: none;
}

li {
  font-size: 25px;
  width: 8em;
  height: 2em;
  color: green;
  border-left: 0.08em solid;
  position: relative;
  margin-top: 0.8em;
  cursor: pointer;
}

li::before,
li::after {
  content: '';
  position: absolute;
  width: inherit;
  border-left: inherit;
  z-index: -1;
}

li::before {
  height: 80%;
  top: 10%;
  left: calc(-0.15em - 0.08em * 2);
  filter: brightness(0.8);
}

li::after {
  height: 60%;
  top: 20%;
  left: calc(-0.15em * 2 - 0.08em * 3);
  filter: brightness(0.6);
}

li span {
  position: relative;
  height: 120%;
  top: -10%;
  box-sizing: border-box;
  border: 0.08em solid;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  text-transform: capitalize;
  transform: translateX(calc(-0.15em * 3 - 0.08em * 2));
  transition: 0.3s;
}

li:hover span {
  transform: translateX(0.15em);
}

li a {
  text-decoration: none;
  color: green;
}

.list {
  float: right;
  margin: 15px 15px 15px 50px;
  max-width: 7%;
  position: relative;
}

.hide {
  /* */
  /* 	text-decoration: none;
	list-style-type: none; */
}

.info {
  text-align: justify;
  width: 70%;
  margin: 1% 1% 1% 8%;
  box-sizing: border-box;
  < !–– box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  ––>padding: 20px;
  display: block;
  font-size: 150%;
  font-family: font-family: 'Dosis', sans-serif;
  border-radius: 15px;
  z-index: -1;
  text-decoration: none;
}

.golf_video {
  display: flex;
  justify-content: center;
  margin-left: 10px;
}

.cf-logo-with-details {
  float: right;
  position: relative;
  margin: 15px 15px 15px 10px;
  max-width: 15%;
}

.asurion_and_cf {
  float: left;
  margin: 15px 15px 15px 50px;
  max-width: 7%;
  position: relative;
}
<div class="list"><br><br><br>
  <ul>
    <li><a href="index.html"><span>Home</span></a></li>
    <li><a href="sponsor-form.php"><span>Sponsor</span></a></li>
    <li><a href="player-form.php"><span>Player</span></a></li>
    <li class="hide" style="display:none;"><a href="#"><span>Hidden</span></a></li>
  </ul>
</div>

<div style="display:none">
  The quick brown fox jumps over the head of the lazy dog.
</div>


<div class="info">

  <br><br><br>The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
  est laborum." Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
  et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
  quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
  aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>

关于html - 不必要的下划线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57286648/

24 4 0
文章推荐： javascript - 如何在用户通过后退按钮返回页面时隐藏加载叠加层
文章推荐： javascript - 将鼠标悬停在缩略图上以将主图像更改为两倍大小的缩略图，并且主图像应链接到与缩略图相同的网站
文章推荐： javascript - 使用 jquery 的搜索栏
文章推荐： c# - 如何获得具有不同背景颜色的下拉菜单。下拉选项是动态的
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com