對齊文本和圖像到右這個CSS

-1

我在這裏運行的一個小問題，所以我在這裏問一些幫助不能找到一個解決方案。我正在構建一個website，我使用Foundation Zurb作爲基礎佈局。那麼在頁面頭部，如果你以demo/demo123登錄，你會看到一個頭像圖像，除了一些鏈接外，還有配置文件，註銷和用戶名。我需要通過將這些文本對齊而在圖像之前修正此代碼。也許我的標記是醜陋的，所以我接受關於這個主題的建議。您可以嘗試與幾個用戶進行測試：對齊文本和圖像到右這個CSS

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

怎麼了？歡呼和THX提前

來源

2012-09-10 ReynierPM

試着改善你的問題的標題。「這個CSS」沒有任何價值。 – Pavlo

我通常覺得你誤用網格系統試圖通過有8列，它是沒有意義的有一個列表的列表，以及其它問題內12列什麼是錯的。對我來說，重寫標記的用戶面板部分是最簡單的，然後對其進行設計，而不必擔心壓倒性的事情。

我將取代目前分類股利「八柱移動三」有以下幾點：

<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佈局，這我假設是你想要的。

來源

2012-09-10 17:16:13 tuff

感謝您的回覆，但沒有成功不知道原因，因爲您按照建議進行了更改。這是怎麼看起來像使用您的建議：http://easycaptures.com/fs/uploaded/654/1537322759.png，這就是我需要得到http://easycaptures.com/2013929056 – ReynierPM

因爲你沒有把在我給你的標記，你放入了不同的東西。您還遺留了'.account-options，.logout-link'的樣式，該樣式應該被刪除。我更新了我的答案中的CSS以匹配您的屏幕截圖。 – tuff

我再次檢查並解決問題，但仍然無法正常工作 – ReynierPM

你必須改變theese線浮動值來替代。所以它們彼此流暢，而不是彼此相依。

線98 .avatar {位置：絕對的;右：0;}

線100 。用戶名{ 位置：絕對; 顏色：白色; font-family：Verdana，sans-serif; font-size：14px; right：0;

}

來源

2012-09-10 17:04:43

對齊文本和圖像到右這個CSS

回答

相關問題