如何在不移动居中 div 内容的情况下添加 padding-left？

莫西2k

我有一个内容居中的 div，使用两个部分设置为左 50% 和左 -50%。我想将 padding-left 添加到插入符号图像中，以便它向右滑动 10 像素，而不会将其余内容推过去。我知道这与添加 10px 后 div 内容变宽有关，但我不确定如何锚定内容的左侧。

链接到 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>

安迪霍夫曼

而不是padding-left，我建议使用translateXviatransform函数。

有意义的变化在这里：

.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。