Question

我正在制作一个日历，我有多个列表，我想并排放置。我有div，div内有多个列表。这是html：

<div class="weekly-view">
    <ul class="hours">
        <li>
            <div class="appt">1</div>
            <div class="appt">1</div>
            <div class="appt">1</div>
        </li>
        <li>
            <div class="appt">2</div>
            <div class="appt">2</div>
            <div class="appt">2</div>
        </li>
        ....
    </ul>
    <ul class="hours">
        <li>
            <div class="appt">3</div>
            <div class="appt">3</div>
            <div class="appt">3</div>
        </li>
        <li>
            <div class="appt">4</div>
            <div class="appt">4</div>
            <div class="appt">4</div>
        </li>
        ....
    </ul>
</div>

这是css：

.weekly-view {
  clear: both;
  list-style: none;
}
.weekly-view .hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
.weekly-view .hours li {
  width: 13.857142857%;
}

我正在使用webkit并继续在右侧获得巨大的利润。我无法弄清楚它来自哪里。我如何将这些列表并排放置？

Answer 1

你的css文件应该是这样的：

.weekly-view {
  clear: both;
  list-style: none;
}
.weekly-view .hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
.weekly-view .hours li {
  width: 13.857142857%;
}
.hours {
    float: left;
}

Answer 2

<div class="weekly-view">
  <div class="hours">
    <ul >
        <li>
            <div class="appt">1</div>
            <div class="appt">1</div>
            <div class="appt">1</div>
        </li>
        <li>
            <div class="appt">2</div>
            <div class="appt">2</div>
            <div class="appt">2</div>
        </li>
        ....
    </ul>
  </div> 
  <div class="hours">
    <ul >
        <li>
            <div class="appt">3</div>
            <div class="appt">3</div>
            <div class="appt">3</div>
        </li>
        <li>
            <div class="appt">4</div>
            <div class="appt">4</div>
            <div class="appt">4</div>
        </li>
        ....
    </ul>
  </div>
</div>

CSS

   .hours{
        float: left;
        margin: 0 20px 0 0;
    }
ul, li{
margin:0;
padding:0 0 0 15px;    
}

如何并排排列？

2 个答案: