Question

我在这里遇到一个小问题但无法找到解决方案，所以我在这里寻求帮助。我正在构建website并使用Foundation Zurb作为基本布局。如果您以登录为demo / demo123登录页面标题，您将看到一个头像图像，并在一些链接旁边转到个人资料，注销和用户名。我需要通过将这些文本对齐但在图像之前对齐来修复此代码。也许我的标记很难看，所以我接受有关这个主题的建议。您可以尝试与多个用户进行测试：

demo/demo123, 1632dd55e/1qazxsw2, 1632e8322/1qazxsw2

怎么了？干杯和thx提前

Answer 1

我认为一般来说错误的是你错误地使用了网格系统，试图在8列中包含12列，列表中没有列表，以及其他问题。我最简单的方法是重写标记的用户面板部分，然后设置样式，而不必过分担心覆盖事物。

我将用以下内容替换目前归类为“八柱移动三”的div：

<div class="eight columns mobile-three user-panel">
  <div class="user-controls">
    <ul>
      <li class="account-options"><a href="http://comvivem.treswd.com/net/my-profile">Opciones de cuenta</a></li>
      <li class="logout-link"><a href="http://comvivem.treswd.com/net/users/logout">Cerrar sesión</a></li>
    </ul>
  </div>

  <div class="user">
    <span class="user-name">Demo</span>
    <a class="avatar" href="http://comvivem.treswd.com/net/users/view/2">
      <img title="Demo&nbsp;Demo" alt="Demo&nbsp;Demo" style="" src="uploads/default/files/kung_fu_panda.gif">
    </a>
  </div>
</div>

然后删除.user-panel及其后代元素上的所有现有样式。添加以下样式：

.user-panel {
 color: #FFFFFF;
 text-align: right;
}

.user-panel a { color: #FFFFFF; }
.user-panel .user-controls {
    margin: 9px 54px 0 0;
}
.user-panel .user-controls ul { list-style-type: none; }
.user-panel .user-controls li {
    display: inline-block;
    font-size: 11px;
}
.user-panel .user-controls li:not(:last-child):after {
    color: #FFFFFF;
    content: "|";
    padding: 0 3px 0 6px;
}

.user-panel .user {
    position: absolute;
    right: 6px;
    top: 0;
}
.user-panel .user .user-name {
    bottom: 10px;
    margin-right: 54px;
    position: relative;
}
.user-panel .user .avatar {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 8px;
    width: 54px;
}
.user-panel .user .avatar img {
    max-height: 54px;
    max-width: 54px;
}

这应该会产生像this这样的布局，我假设它就是你想要的。

Answer 2

您必须将theese行更改为浮点值。所以它们彼此流畅，而不是彼此的地形。

第98行 .avatar {position：absolute;右：0;}

第100行。用户名 { 位置：绝对; 白颜色; font-family：Verdana，sans-serif; font-size：14px; 右：0;

}

在此CSS上将文本和图像对齐到右侧

2 个答案: