0

我似乎不太清楚如何从我制作的 Photoshop 模型中制作 CSS。下图显示了我想要完成的任务。基本上，每个设计/修订块都是一个样式<li>标记，我想将标题浮动到左侧，将日期/时间浮动到右侧。此外，我希望一切都垂直对齐。

有任何想法吗？我尝试在 each 中使用一个表<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

请看这个 Fiddle，应该是你想要做的！

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% 的 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>一个块元素，然后在里面放两个<div>'s，一个向左浮动一个向右浮动呢？

<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 中添加一个.before 。date

于 2012-05-10T21:00:50.450 回答
-1

基本上，您希望float使用 container 为您的项目指定它们各自的方向<div>'s。然后设置左边项目的左边距和垂直对齐，右边项目的右边距和垂直对齐。

这是它的基础知识，我不能在我的手机上详细说明。我以后可能会编辑这个。

于 2012-05-10T20:58:15.883 回答