0

作成したPhotoshopのモックアップからCSSを実行する方法がよくわからないようです。下の画像は私が達成したいことを示しています。基本的に、各Design / Revisionブロックはスタイル<li>付きタグであり、タイトルを左側に、日付/時刻を右側にフロートさせたいと思います。さらに、すべてを垂直に揃えたい。

何か案は？それぞれの中でテーブルを使おうとしました<li>が、うまくいかなかったようです（または間違っただけでした）。

アイデア？

ここに画像の説明を入力してください

4

9 に答える 9

3

HTMLの場合：

<ul>
  <li>
      <span class="title">Design</span>
      <span class="date">2012 may 15</span>
  </li>
</ul>

cssで：

li .title{
  float: left;
  display: block;
  width: 150px;
}
li .date{
  float: right;
  display: block;
  width: 50px;
}
于 2012-05-10T20:57:41.327 に答える
3

このフィドルを見てください、あなたがやろうとしていることでなければなりません！

HTML

<ul>
    <li>
        <a href="#" title="" class="clearfix">
            Design 1
            <span>May 6, 2012<br>11:34AM</span>
        </a>
    </li>
    <li>
        <a href="#" title=""class="clearfix">
            Revision 1
            <span>May 7, 2012<br>2:14AM</span>
        </a>
    </li>
</ul>

CSS

body {
    background-color: #000;
    margin: 0;
    padding: 20px;
    font-family: sans-serif;
}
ul {
    list-style-type: none;
}
li {
    display: block;
    width: 240px;
    background-color: #212121;
    border: 1px solid #212121;
    border-top: 1px solid #444;
}
li a {
    padding: 10px;
    color: #fff;
    font-size: 18px;
    display: block;
    line-height: 24px;
    text-decoration: none;
}
li span {
    float: right;
    font-size: 10px;
    display: block;
    line-height: 12px;
    color: #999;
    text-align: right;
}

/* helpers */
.clearfix:before,
.clearfix:after  {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

CSSを分析して、フロートとドキュメントのワークフローについて詳しく学びましょう。

それについてもっと読む：

CSSフロート

ドキュメントフロー/ビジュアルフォーマット

そして、印刷画面：

ここに画像の説明を入力してください

于 2012-05-10T21:08:26.067 に答える
1

幅が50％で、それぞれの側に浮いている2つのdivタグを作成します。したがって、マークアップは次のようになります。

<ul>
    <li>
        <div class="title">
            Title
        </div>
        <div class="date">
            May 10
        </div>
    </li>
</ul>

次に、次のCSSを使用してスタイルを設定します。

.title,
.date {
    width: 50%;
}

.title {
    float: left;
}

.date {
    float: right;
}
于 2012-05-10T20:58:37.613 に答える
1

あなたの質問のタイトルはその場でした:)

そのようなことをするために、あなたはfloatプロパティを使うことができます

次のマークアップを使用：

<ul>
    <li>
        <div class="name">Design</div>
        <div class="time">01/01/2011</div>
    </li>
    <li>
        <div class="name">Revision</div>
        <div class="time">01/01/2012</div>
    </li>
<ul>​

そしてCss：

.name{
    float:left;
}

.time{
    float:right;
}

li{
    clear:both;        
}

それでうまくいくはずです。

ここの例

于 2012-05-10T20:59:59.893 に答える
1 
<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    <style type="text/css">

        p {
            margin: 0;
        }

        #revision_block li {
            height: 50px;
            width: 250px;
            background: url("path/to/your/background_image.jpg/png") top left no-repeat;
            display: block;
        }

        #revision_block li .title {
            font-size: 20px;
            padding-top: 13px;
            color: #eae; /*your color*/
            position: relative;
            float: left;
        }

        .date {
            text-align: right;
            float: right;
            padding-top: 7px;
        }

        .date p {
            border: 0;
            margin: 0;
            font-size: 12px;
            line-height: 18px;
            color: #eae; /*your color*/
        }

        .clearfix:after {
                content: ".";
                display: block;
                clear: both;
                visibility: hidden;
                line-height: 0;
                height: 0;
        }

        .clearfix {
                display: inline-block;
        }

        html[xmlns] .clearfix {
                display: block;
        }

        * html .clearfix {
                height: 1%;
        }

    </style>
</head>

<body>

    <ul id="revision_block">
        <li class="clearfix">
            <p class="title">Design 1</p>
            <div class="date">
                <p>May 6, 2012</p>
                <p>11:34</p>
            </div>
        </li>
        <li class="clearfix">
            <p class="title">Design 1</p>
            <div class="date">
                <p>May 6, 2012</p>
                <p>11:34</p>
            </div>
        </li>
    </ul>

</body>
</html>
于 2012-05-10T21:12:46.760 に答える
0

それぞれ<li>のブロック要素を作成し、その中に2つ<div>のを入れて、1つを左に、もう1つを右に浮かせたらどうなるでしょうか。

<li style="dislpay:block;">
    <div style="float:left;">Design 1</div>
    </div style="float:right;">May 6, 2012</div>
</li>
于 2012-05-10T20:56:45.317 に答える
0

タグは引き続き使用できます<li>。このようなことをする

<li>
    <div class='a'>
    </div>
    <div class='b'>
    </div>
</li>

aとbの両方を左にフロートさせます。必要に応じてコンテナも。これにより、幅を指定しなければならない場合があることに注意してください。そうでない場合は、display：inline-blockを使用できます

于 2012-05-10T20:57:28.017 に答える
0

タイトルを付けfloat: left;、日付を付けfloat: right;ます。いくつかの例：

<ul>
  <li>
    <h4>Design 1</h4>
    <date datetime="2012-05-06T11:34:00">May 6, 2012 <span>11:34 AM</span></date></li>
  </li>
  <li>
    <h4>Revision 1</h4>
    <date datetime="2012-05-07T14:14:00">May 7, 2012 <span>2:14 AM</span></date></li>
  </li>
</ul>

次に、このスタイルを追加します。

li h4
{
    float: left;
}
li date
{
    float: right;
}

または、HTML5を使用したくない場合（理由はわかりません）：

<ul>
  <li>
    <h4>Design 1</h4>
    <span class="date">May 6, 2012 <span>11:34 AM</span></span></li>
  </li>
  <li>
    <h4>Revision 1</h4>
    <span class="date">May 7, 2012 <span>2:14 AM</span></span></li>
  </li>
</ul>

そして、CSS.に前を追加します。date

于 2012-05-10T21:00:50.450 に答える
-1

基本的に、floatコンテナを使用してアイテムをそれぞれの方向に配置します<div>'s。次に、左側のアイテムの左マージンと垂直方向の配置、および右側のアイテムの右マージンと垂直方向の配置を設定します。

それがその基本です、私は私の電話であまり詳細に入ることができません。これは後で編集するかもしれません。

于 2012-05-10T20:58:15.883 に答える