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

Question

我希望我的按钮 link 到我拥有的 html 文件等等。但它不在我为 p 设置的边界内。为什么要这样做？当我将它包含在 p 中时，它仍然在外面，当我把它放在 p 外面时，它仍然在边界之外。我希望按钮位于 'something something'（测试词）所在的边框内的右下角。我在这里错过了什么？也不要担心按钮旁边的黑色圆圈，当按钮在实际站点上时它不存在。

<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 元素在 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

Answer 2

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 3

在您的 css

中试试这个

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

工作Demo

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

My read more button isn't inside my borders

html

css

border

button