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

I want my button to link to a html file I have and such. But it isn't inside the borders I set for p. Why is it doing this? When I enclose it in p it's still outside and when I put it outside p it's still beyond the border. I want the button to be at the bottom right inside the borders where the 'something something' (test words) are. What am I missing here? Also don't worry about the black circle next to the button, it's not there when the button is on the actual site.

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

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

And the css

和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

3 个解决方案

#1

ul elements are not legally allowed inside p elements.

在p元素内不合法允许ul元素。

<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

#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;
}

#3

Try this in your css

在你的CSS中尝试这个

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

Working Demo

#1