Question

所以我正在制作一个应用程序，我有一个图像和一些带有用户名和姓氏的文本，但是当名称稍长时，图像越过名称，并在CSS中进行了一些挖掘，因为左边标签开始从名称的左侧开始计数，因此当名称稍长时，它将移动我的图像。您可能什么都不懂，所以我会附上一些图片来说明我的问题。

我需要什么：

将名字改大我将拥有什么：

我的代码：

body{
    font-family: 'Ubuntu', sans-serif;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.text-center{
    text-align: center;
}

.btn{
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
}

.off{
    display: none;
}

.error{
    color: var(--red);
    margin-left: 0.5em;
}

.navbar {
  position: relative;
  overflow: hidden;
  background-color: var(--white);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.navbar a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--black);
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}

.navbar-left {
  margin-left: 20%;
}

.navbar-left img {
  margin-top: 0.4em;
  width: 100px;
  height: auto;
}

.navbar-centered {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
}

.navbar-right {
  float: right;
  margin-top: 0em;
  margin-right: 20%;
  max-height: 65px !important;
}

.navbar-right .btn {
  background-color: var(--white);
  border: 2px solid var(--red);
  box-sizing: border-box;
  border-radius: 8px;
  color: var(--red);
}

.logged-in {
  margin-top: 0.1em;
  margin-right: 3.5em;
}

.logged-in ul {
  margin: 0 !important;
  padding: 0 !important;
  padding-right: 1em;
  padding-left: 1em;
}

.profile-a-img {
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  top: -2.5em;
  right: -10.2em;
}

.logged-in img {
  border-radius: 10em;
  max-width: 3em;
}

.name-id {
  list-style: none !important;
}

.name-id .ID {
  position: relative;
  float: right;
  top: -1em;
  margin: 0px;
  padding: 0px;
  padding-right: 1em;
  font-size: 15px !important;
  font-weight: 400;
}

<link rel="stylesheet" href="{{ url_for('static', filename='css/navbar/dashboard_style.css') }}">
<div class="header-div">
  <div class="navbar">
    <div class="navbar-left">
    </div>
    <div class="navbar-centered">
    </div>
    <div class="navbar-right">
      <div class="not-logged-in off">
        <a href="{{ url_for('login.loginpage')}}">Log In</a>
        <a class="btn" href="">Registration</a>
      </div>
      <div class="logged-in">
        <ul class="name-id">
          <li><a class="name" href="">Antonio Goncalves</a></li>
          <li><a class="ID" href="">ID 1</a></li>
        </ul>
        <a class="profile-a-img" href=""><img src="https://sunrift.com/wp-content/uploads/2014/12/Blake-profile-photo-square.jpg" alt=""></a>
      </div>
    </div>
  </div>
</div>
</div>

名称，ID和图像是从数据库中加载的，因此我真的需要通用。

如果您对我如何进行这项工作有任何建议，请告诉我。

Answer 1

不能100％确定要达到的目标，但这听起来像您想使用transform: translateX(-100%);。这会将您的元素向左移动其整个宽度。

还要考虑摆脱所有!important，因为它不应该经常使用。

有没有一种方法可以使左侧标签从对象的右侧开始计数？

1 个答案: