html - 非フローティング div とフローティング div を同じ行に配置する方法は?

Question

現在、リスト項目番号は右側に表示されています。document-export-icon クラスからフロートを削除すると、リスト アイテム # は左側に正しく表示されますが、タイトルと日付は次の行に移動します。エクスポート アイコンと同じ行に配置する必要があります。

これが私がこれまでに持っているものです: http://jsbin.com/owanod/2/edit#source

表示方法は次のとおりです。

Answer 1

あなたの例に次の 3 つの CSS ルールを追加しました。

.document-export-icon, .document-title-separate, .document-date {
    display: inline-block;
}
.document-date {
    position:absolute;
    right:0px;
}
.document-wrapper {
    position:relative;
}

jsFiddle の例。