我有一个内容居中的 div，使用两个部分设置为左 50% 和左 -50%。我想将 padding-left 添加到插入符号图像，以便它向右滑动 10 px，而不会将其余内容推到上面。我知道这与添加 10px 后 div 内容变宽有关，但我不确定如何锚定内容的左侧。
Link to codepen: https://codepen.io/mowsie2k/pen/gOvdPLj
代码:
* {
box-sizing: border-box;
}
body {
background-image: url("bg1.jpeg");
background-size: cover;
margin: 0;
}
.navbar,
.navbar-news {
font-family: Arial, Helvetica, sans-serif;
background-color: dodgerblue;
font-size: small;
color: white;
overflow: hidden;
width: 100%;
}
.navbar-news-outer,
.navbar-news-inner {
margin: 0mm;
float: left;
position: relative;
}
.navbar-news-outer {
left: 50%
}
.navbar-news-inner {
left: -50%;
}
.navbar-news a,
.navbar-news i {
color: bisque;
transition: color .3s ease-out;
transition: padding-left .3s ease-out;
}
.navbar-news a:hover {
color: blueviolet;
}
.navbar-news a:hover i {
color: blueviolet;
padding-left: 10px;
}<div class="navbar-news">
<div class="navbar-news-outer">
<div class="navbar-news-inner">
<span>
Newest Blog Post: Cybersecurity in the Era of Cloud Infrastructure <a>READ HERE <i class="fa fa-caret-right"></i></a>
</span>
</div>
</div>
</div>最佳答案
我建议通过 transform 函数使用 translateX 而不是 padding-left。
有意义的变化在这里:
.navbar-news a, .navbar-news i {
color: bisque;
transition: transform .3s ease-out, color .3s ease-out;
}
.navbar-news a:hover i {
color: blueviolet;
transform: translateX(10px);
}
演示
* {
box-sizing: border-box;
}
body {
background-image: url("bg1.jpeg");
background-size: cover;
margin: 0;
}
.navbar, .navbar-news {
font-family: Arial, Helvetica, sans-serif;
background-color: dodgerblue;
font-size: small;
color: white;
overflow: hidden;
width: 100%;
}
.navbar-news-outer, .navbar-news-inner {
margin: 0mm;
float: left;
position: relative;
}
.navbar-news-outer{
left: 50%
}
.navbar-news-inner{
left: -50%;
}
.navbar-news a, .navbar-news i {
color: bisque;
transition: transform .3s ease-out, color .3s ease-out;
}
.navbar-news a:hover {
color: blueviolet;
}
.navbar-news a:hover i {
color: blueviolet;
transform: translateX(10px);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" charset="UTF-8">
<title>Title Here</title>
<!-- Local CSS -->
<link rel="stylesheet" href="style3.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar-news">
<div class="navbar-news-outer">
<div class="navbar-news-inner">
<span>
Newest Blog Post: Cybersecurity in the Era of Cloud Infrastructure <a>READ HERE <i class="fa fa-caret-right"></i></a>
</span>
</div>
</div>
</div>
</body>关于html - 如何在不移动居中的 div 内容的情况下添加 padding-left？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72524846/