Question

我想创建与以下相同的时间表。

这是我的带有div标签的css代码。

<html>
<header>
<style type="text/css">
div.whole {
    padding: 200px 0 0 0;
    width:660px;
    margin:0 auto;
    align:center;}
p.h {width:660px;text-align:center;}
div{
    list-style:none;
    margin:0 0;
    padding 0 0 0 0;
    display:inline-block;
    border-bottom: 1px dashed black;
    width:100px;}
</style>
</header>

<body>
<div class="whole">
<p class='h'>timetabling</p>

<div>
<div>time</div><div>mon</div><div>tue</div><div>wed</div><div>thu</div><div>fri</div>
</div>
<div>
<div>9:00</div><div>x1</div><div>x2</div><div>none</div><div>x3</div><div>x4</div>
</div>
<div>
<div>10:00</div><div>none</div><div>x3</div><div>x1</div><div>x3</div><div>x4</div>
</div>
<div>
<div>11:00</div><div>none</div><div>x3</div><div>x1</div><div>x3</div><div>x4</div>
</div>
<div>
<div>12:00</div><div>x1</div><div>x1</div><div>x4</div><div>x2</div><div>none</div>
</div>

<div>
<div>total</div><div>2</div><div>4</div><div>3</div><div>4</div><div>3</div>
</div>

</div>
</body>
</html>

显示的效果如下：

这里有两个问题：
1，margin:0 auto;不能使它成为中心 2. div元素是垂直显示的，如何使它水平显示？

Answer 1

对于解决方案1：要使margin:0 auto工作display:block至div.whole

对于解决方案2：：“ div元素垂直显示如何使其显示为水平”将类提供给行的父div。在这里，我给class="parent"并给width: 100%;水平。

div.whole {
    padding: 200px 0 0 0;
    width:660px;
    margin:0 auto;
    align:center;
    display:block; //Here
 }

p.h {width:660px;text-align:center;}

div{
    list-style:none;
    margin:0 0;
    padding 0 0 0 0;
    display:inline-block;
    border-bottom: 1px dashed black;
    width:100px;}
    
    .parent {
    width: 100%;
}

<div class="whole">
<p class='h'>timetabling</p>

<div class="parent">
<div>time</div><div>mon</div><div>tue</div><div>wed</div><div>thu</div><div>fri</div>
</div>
<div class="parent">
<div>9:00</div><div>x1</div><div>x2</div><div>none</div><div>x3</div><div>x4</div>
</div>
<div class="parent">
<div>10:00</div><div>none</div><div>x3</div><div>x1</div><div>x3</div><div>x4</div>
</div>
<div class="parent">
<div>11:00</div><div>none</div><div>x3</div><div>x1</div><div>x3</div><div>x4</div>
</div>
<div class="parent">
<div>12:00</div><div>x1</div><div>x1</div><div>x4</div><div>x2</div><div>none</div>
</div>

<div class="parent">
<div>total</div><div>2</div><div>4</div><div>3</div><div>4</div><div>3</div>
</div>

</div>

<强> Working Fiddle

Answer 2

这就是你想要的，这适用于任何尺寸。我使用内部样式表，如果你想要你可以使用external.change你想要的值。

<!DOCTYPE html>
<html>
<head>
    <title></title>


    <style type="text/css">
      .manicontainer{
        width: 100%;
        height: auto;
        border:1px solid black;
      }

      div.rows{
        width: 100%;
        height:50px;
        border:1px solid red;
      }

      div.rows div{
        width:16.6%;
        text-align: center;
        font-family: helvetica;
        float: left;
        padding-top: 10px;
        font-size: 20px;

      }   

      div.rows div:first-Child{
        background-color: black;
        height: 40px;
        color: white;
      }   
    </style>
</head>
<body>
<h1 style="text-align:center;font-family:helvetica;">Time Table</h1>
 <div class="maincontainer">
    <div class="rows">
        <div>time</div>
        <div>9.00</div>
        <div>10.00</div>
        <div>11.00</div>
        <div>12.00</div>
        <div>total</div>
    </div>
    <div class="rows">
        <div>mon</div>
        <div>x1</div>
        <div>none</div>
        <div>none</div>
        <div>x1</div>
        <div>2</div>
    </div>
    <div class="rows">
        <div>mon</div>
        <div>x1</div>
        <div>none</div>
        <div>none</div>
        <div>x1</div>
        <div>2</div>
    </div>
    <div class="rows">
        <div>mon</div>
        <div>x1</div>
        <div>none</div>
        <div>none</div>
        <div>x1</div>
        <div>2</div>
    </div>
    <div class="rows">
        <div>mon</div>
        <div>x1</div>
        <div>none</div>
        <div>none</div>
        <div>x1</div>
        <div>2</div>
    </div>
    <div class="rows">
        <div>mon</div>
        <div>x1</div>
        <div>none</div>
        <div>none</div>
        <div>x1</div>
        <div>2</div>
    </div>
 </div>  


</body>
</html>

如何正确创建div的时间表？

2 个答案: