英文:
How to change color for links (href text) in thymeleaf?
问题
我在Thymeleaf页面中有以下链接(href)。
<div class="product-preview-container"
th:each="prodInfo : ${products}">
<ul>
<li>Product Code: <span th:utext="${prodInfo.productCode}"></span></li>
<li>Product Name: <span th:utext="${prodInfo.productName}"></span></li>
<li>Product Price: Rs <span th:utext="${prodInfo.productPrice}"></span></li>
<li><a th:href="@{|/shopping/buyProduct?code=${prodInfo.productCode}|}" th:color="white">Add to Cart</a></li>
</ul>
</div>
CSS
.product-preview-container {
border: 1px solid #ccc;
padding: 5px;
width: 250px;
margin: 10px ;
display: inline-block;
text-align: left;
color: white;
}
.product-preview-container input {
width: 50px;
}
输出 :
产品编号、产品名称和产品价格都显示为白色。只有“Add to Cart”链接部分不是白色。我的背景图像是蓝色的。我希望将“Add to Cart”链接显示为白色。怎么做呢？
英文:
I have the below link(href) in Thymeleaf page.
<div class="product-preview-container"
th:each="prodInfo : ${products}">
<ul>
<li>Product Code: <span th:utext="${prodInfo.productCode}"></span></li>
<li>Product Name: <span th:utext="${prodInfo.productName}"></span></li>
<li>Product Price: Rs <span th:utext="${prodInfo.productPrice}"></span></li>
<li><a th:href="@{|/shopping/buyProduct?code=${prodInfo.productCode}|}" th:color="white">Add to Cart</a></li>
</ul>
</div>
CSS
.product-preview-container {
border: 1px solid #ccc;
padding: 5px;
width: 250px;
margin: 10px ;
display: inline-block;
text-align:left;
color: white;
}
.product-preview-container input {
width: 50px;
}
Output :
Product Code, Product Name and product Price all are coming in white. Except the Add to Cart potion.
My background has an image of blue color. I want to make the link Add to Cart to be displayed in white. How to do that ?
答案1
得分: 2
以下是翻译好的内容：
简而言之，
您可以为 <a> 标签添加一个颜色。
.product-preview-container a{
color: white;
}
.product-preview-container {
border: 1px solid #ccc;
padding: 5px;
width: 250px;
margin: 10px ;
display: inline-block;
text-align:left;
color: white;
}
.product-preview-container input {
width: 250px;
}
.bgblue{
background:#034d89;
width: 282px;
/* 内部 div 宽度+外边距+内边距+边框 = 250+1*10+2*5+2*1=282px */
}
.product-preview-container a{
color: white;
}
<div class="bgblue">
<div class="product-preview-container" th:each="prodInfo : ${products}">
<ul>
<li>产品代码：<span th:utext="${prodInfo.productCode}"></span></li>
<li>产品名称：<span th:utext="${prodInfo.productName}"></span></li>
<li>产品价格：Rs <span th:utext="${prodInfo.productPrice}"></span></li>
<li><a th:href="@{|/shopping/buyProduct?code=${prodInfo.productCode}|}" th:color="white">加入购物车</a></li>
</ul>
</div>
</div>
英文:
Simply,
You can add a color to <a> tag.
.product-preview-container a{
color: white;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.product-preview-container {
border: 1px solid #ccc;
padding: 5px;
width: 250px;
margin: 10px ;
display: inline-block;
text-align:left;
color: white;
}
.product-preview-container input {
width: 250px;
}
.bgblue{
background:#034d89;
width: 282px;
/* inner div width+margin+padding+border = 250+1*10+2*5+2*1=282px */
}
.product-preview-container a{
color: white;
}
<!-- language: lang-html -->
<div class="bgblue">
<div class="product-preview-container" th:each="prodInfo : ${products}">
<ul>
<li>Product Code: <span th:utext="${prodInfo.productCode}"></span></li>
<li>Product Name: <span th:utext="${prodInfo.productName}"></span></li>
<li>Product Price: Rs <span th:utext="${prodInfo.productPrice}"></span></li>
<li><a th:href="@{|/shopping/buyProduct?code=${prodInfo.productCode}|}" th:color="white">Add to Cart</a></li>
</ul>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论