-1

我在这里遇到了一个小问题，找不到解决方案，所以我在这里寻求帮助。我正在建立一个网站，我使用Foundation Zurb作为基本布局。如果您以 demo/demo123 身份登录，那么在页面标题处，您将看到头像图像以及一些指向个人资料、注销和用户名的链接。我需要通过将这些文本右对齐但在图像之前来修复此代码。也许我的标记很丑，所以我接受关于这个主题的建议。您可以尝试与多个用户一起进行测试：

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

怎么了？

4

2 回答 2

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;
}

那应该会产生这样的布局，我假设这是您想要的。

于 2012-09-10T17:16:13.847 回答
0

您必须将这些行更改为浮点值。因此它们彼此流动，而不是彼此重叠。

第 98 行 .avatar{位置：绝对；对：0；}

第 100 行 .user-name { 位置：绝对；白颜色; 字体系列：Verdana，无衬线；字体大小：14px；右：0；

}

于 2012-09-10T17:04:43.187 回答