-1

私はここで小さな問題を実行していますが、解決策が見つからないので、ここで助けを求めます。私はウェブサイトを構築していて、基本レイアウトとしてFoundationZurbを使用しています。ページヘッダーにdemo/demo123としてログインすると、アバター画像が表示され、プロファイル、ログアウト、ユーザー名に移動するためのリンクがいくつか表示されます。これらのテキストを画像の前で右に揃えて、このコードを修正する必要があります。たぶん私のマークアップは醜いので、このトピックに関する提案を受け入れます。テスト目的で、複数のユーザーで試すことができます。

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

どうしたの？

4

2 に答える 2

1

一般的に間違っているのは、8列の中に12列を配置しようとしてグリッドシステムを誤用していること、リストを作成しても意味がないリストなどの問題だと思います。マークアップのユーザーパネルセクションを書き直して、オーバーライドすることをあまり気にせずにスタイルを設定するのが最も簡単でした。

現在「8列のモバイル3」に分類されている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

代わりに、これらの行をfloat値に変更する必要があります。したがって、それらは互いに流動的であり、互いのトポに依存しません。

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

100行目.user-name{位置：絶対; 色：白; フォントファミリー：Verdana、sans-serif; フォントサイズ：14px; 右：0;

}

于 2012-09-10T17:04:43.187 に答える