时间戳

首页 > 解决方案 > 我添加了一个带有文本“阅读更多”的锚标记，但样式有一些错误

css - 我添加了一个带有文本“阅读更多”的锚标记，但样式有一些错误

问题描述

如下图所示，锚标签并不是最好看的：

1

 <div class="news_1">
  <img class="img" src="" alt="Loading">

  <div class="data"></div>
  <a class="read_more" href="">Read more</a>
</div>

我有一堆这些作为显示新闻的容器

*{
  margin: 0;
  padding: 0;
  background-color: #3d3b3b;
}
.news_1{
  width: 65%;
  height: 20rem;
  margin: 3ex;
  display: flex;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  background-color: rgb(121, 121, 121); 
}
img{
  width: 40%;
  height: 90%;
  margin-left: 2rem;
}
.data{
  display: inline;
  padding: 1ex;
  font-size: 1.5rem;
  color: rgb(255, 255, 255);
  background-color: rgb(121, 121, 121);
  overflow: hidden;
}
.read_more{  
  color: rgb(255, 255, 255);
  display: block;
  background-color: rgb(121, 121, 121);
  overflow: hidden;
}
input{
  color: white;
  display: inline;
  float: right;
  width: 20vw;
  height: 5vh;
  margin: 3.5rem;
  margin-left: 0.2rem;
  margin-top: 1.2rem;
  padding: 0.2rem;
}
h1{
  color: white;
  text-align: center;
  padding: 2rem;
}

这是CSS

我希望锚标记位于蓝色区域：

2

不太确定该怎么做。我还是个初学者。我将非常感谢您的帮助

标签： css

解决方案

有很多可能性来处理这个问题。由于您已经将“news_1”设置为 display: flex，我们将走那条路。请注意，我仅将“placecage.com”和 lorem ipsum 用于演示目的。

如您所见，默认情况下，div "news_1" 内的弹性项目将水平显示。

将左侧的图像放在自己的 div 中

放置文本并在其自己的 div 中阅读更多内容

另请注意，您应该设置 news_1 css prop: align-items: center;

*{
  margin: 0;
  padding: 0;
  background-color: #3d3b3b;
}
.news_1 {
  display: flex;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  background-color: rgb(121, 121, 121); 
}
img{
  width: auto;
  height: 100%;
}
.data{
  display: block;
  padding: 1ex;
  font-size: 1.5rem;
  color: rgb(255, 255, 255);
  background-color: rgb(121, 121, 121);
  overflow: hidden;
}
.read_more{  
  color: rgb(255, 255, 255);
  display: block;
  background-color: rgb(121, 121, 121);
  position: relative;
}
input{
  color: white;
  display: inline;
  float: right;
  width: 20vw;
  height: 5vh;
  margin: 3.5rem;
  margin-left: 0.2rem;
  margin-top: 1.2rem;
  padding: 0.2rem;
}
h1{
  color: white;
  text-align: center;
  padding: 2rem;
}
 <div class="news_1">
   <div class="image-left">
    <img class="img" src="https://www.placecage.com/550/300">
   </div>
   <div class="text-right">
   <div class="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget ultrices elit.</div>
    <a href="#" class="read_more">Read more</a>
   </div>
</div>

推荐阅读