英文:
How to change the style of the "Read More" button in the elementor card
问题
我是WordPress的新手，我在创建自定义CSS代码以编辑卡片上的按钮时遇到了问题。我想将“阅读更多”按钮居中对齐在文章卡片中，并添加边框，但在Elementor中，我无法做到这一点。我尝试编辑仅适用于包含按钮的<a>元素的自定义代码，但这会改变整个卡片并使文本和描述都居中对齐。
目前我的结果如下图所示。
[目前结果](https://i.stack.imgur.com/oIf51.png)
我想让它像这样：
[我需要的样式](https://i.stack.imgur.com/kdCIy.png)
我尝试创建自定义代码，但我是CSS初学者，它改变了标题、描述和按钮的样式，以下是我的代码：
```css
a.elementor-post__read-more {
width: 100%;
color: #000;
text-align: center;
background-color: #ffd9d9;
border-radius: 6px;
margin-top: auto;
}
英文:
I am a beginner in wordpress, and I am having a problem creating custom CSS code to edit a button on a card. I would like to align the "Read more" button in the center of the post card and add borders to it, but in elementor, I'm not getting it. I tried editing custom code just for the <a> attribute where the button is, however, it changes the whole card and centers both the text and the description.
Currently my result is as in the image below.
I would like to leave it like this:
I tried to create a custom code, but I am a CSS beginner, and it is changing all the title, description and the button, here is my code:
a.elementor-post__read-more {
width: 100%;
color: #000;
text-align: center;
background-color: #ffd9d9;
border-radius: 6px;
margin-top: auto;
}
答案1
得分: 0
a 在查找元素时是不必要的，你应该只使用类名 .elementor-post__read-more。
.elementor-post__read-more {
width: 100%;
color: #000;
text-align: center;
background-color: #ffd9d9;
border-radius: 6px;
margin-top: auto;
}
如果仍然适用于所有标题、描述和按钮元素，请搜索页面中所有作为类名的 elementor-post__read-more 实例，以查看是否会影响其他元素。
英文:
The a is unneccessary in finding the element, you should just use the class, .elementor-post__read-more.
.elementor-post__read-more {
width: 100%;
color: #000;
text-align: center;
background-color: #ffd9d9;
border-radius: 6px;
margin-top: auto;
}
If it still applies to all title, description and button elements search for all instances of elementor-post__read-more as a class insode the page to see if see other elements will be affected
答案2
得分: 0
.elementor-post__read-more {
/* 尝试使用这个CSS！ */
显示: 弹性;
对齐项目: 中心;
文本对齐: 中心;
宽度: 100%;
顶部边距: 15像素;
内边距: 10像素 20像素;
边框: 1像素 实线 #000;
边框半径: 6像素;
颜色: #000;
背景颜色: #ffd9d9;
文本装饰: 无;
过渡: 所有 0.3秒 逐渐;
}
.elementor-post__read-more:hover {
背景颜色: #ffcaca;
}
英文:
You can try this CSS!!
.elementor-post__read-more {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
margin-top: 15px;
padding: 10px 20px;
border: 1px solid #000;
border-radius: 6px;
color: #000;
background-color: #ffd9d9;
text-decoration: none;
transition: all 0.3s ease;
}
.elementor-post__read-more:hover {
background-color: #ffcaca;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论