Question

我希望我的按钮链接到我拥有的html文件等。但它不在我为p设定的边界内。它为什么这样做？当我把它放在p里面时它还在外面，当我把它放在外面时，它仍然在边界之外。我希望按钮位于边框内的“东西”（测试单词）所在的右下角。我在这里错过了什么？另外不要担心按钮旁边的黑色圆圈，当按钮位于实际网站上时它不存在。

<body>
<p class="news1">something something
<ul class="readmore">
<li><a href="#">read more</a></li>
</ul>
</p>    
<br>
</div>
</body>

和css

p.news1 {
color: #f9a724;
text-align:left;
border-style: solid;
border-color: #f9a724;
word-wrap: break-word;
line-height: 100px;
margin-right:50px;
padding:10px;
margin-left:50px;
font-family:Lato-Light;
}

ul.readmore li a{
display: block;
position:absolute;
transition: .4s ease;
padding: 8px 25px;
color: #000000;
background: #f9a724;
text-decoration: none;
}

ul li a:hover{
color: #f9a724;
background: #000000;    
}

https://jsfiddle.net/4f6osawa

Answer 1

ul.readmore li a{
  display: block;
  position:absolute;
    transition: .4s ease;
   padding: 8px 25px;
    color: #000000;
    background: #f9a724;
margin-top:-85px; margin-left:295px;
    text-decoration: none;
}

Answer 2

在你的css中试试这个

ul {
    position: absolute;
    width: 100%;
    top: 85px;
    left: 35px;    
}

工作Demo

Answer 3

<{1>}元素在ul元素内不合法允许

p个元素。

<div class="news1">
    <p>something something</p>
<ul class="readmore">
   <li><a href="#">read more</a></li>
</ul>
<br>
</div>

CSS

.news1 {
    color: #f9a724;
    text-align:left;
    border-style: solid;
   border-color: #f9a724;
    word-wrap: break-word;
    line-height: 100px;
    margin-right:50px;
    padding:10px;
    margin-left:50px;
    font-family:Lato-Light;
    }

ul.readmore li a{
      display: block;
      position:absolute;
        transition: .4s ease;
       padding: 8px 25px;
        color: #000000;
        background: #f9a724;
        text-decoration: none;
    }
ul li a:hover{
  color: #f9a724;
    background: #000000;

}

Demo

我的阅读更多按钮不在我的边界内

3 个答案: