Question

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

有什么想法吗？我尝试在每个<li>中使用一个表，但这似乎不起作用（或者我只是做错了）。

想法？

enter image description here

Answer 1

在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;
}

Answer 2

请参阅this 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 Float

Document Flow / Visual Formating

打印屏幕

enter image description here

Answer 3

我会创建两个宽度为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;
}

Answer 4

您的问题标题当场：）

要做这样的事情，你可以使用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;        
}

这应该可以解决问题。

Example here

Answer 5

<!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>

Answer 6

如果你让每个<li>成为一个块元素，然后在里面放两个<div>，左边一个，右边一个，会怎么样？

<li style="dislpay:block;">
    <div style="float:left;">Design 1</div>
    </div style="float:right;">May 6, 2012</div>
</li>

Answer 7

您仍然可以使用<li>标记。做这样的事情

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

向左和向左漂浮a和b。如果需要容器也是如此。请记住，这可能会强制您指定宽度。如果没有，你可以使用display：inline-block

Answer 8

您将标题放在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。

Answer 9

基本上，您希望使用容器float <div>'s将您的商品指向各个方向。然后为左项设置左边距和垂直对齐，为右项设置右边距和垂直对齐。

这是它的基础，我不能在手机上详细说明。我可能稍后再编辑。

CSS / HTML左右浮动？

9 个答案: