css3 - div中的div无法控制高度?我想控制右边几个蓝色div的高度
伊谢尔伦
伊谢尔伦 2017-04-17 11:24:15
0
2
587

html:

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="order.css">

</head>

<body>

<p class="nav">
    <h1>Plateform</h1>
    <ul>
        <li>
            <p>Order</p>
            <p id="selected"></p>
        </li>
        <li>
            <p>Menu</p>
        </li>
        <li>
            <p>Restuarant</p>
        </li>
    </ul>
</p>
<p class="content">
    <p id="left">
        <ul class="rtab">
            <li>
                <p>Manage order</p>
            </li>
            <li>
                <p>Completed order</p>
            </li>
            <li>
                <p>Closed order</p>
            </li>
        </ul>
    </p>
    <p id="right">
    <input id="search" type="text" >
        <button id="search-button"  >Search</button>
    <p class="oders">
    <ul class="ctab">
        <li>All</li>
        <li>Accepted</li>
        <li>Failed</li>
        </ul>
    <p class="allorders">

       <p class="order1">
           <p class="title">dsdsd</p>
           <p class="userinfo">dsdsd</p>
           <p calss="lastt">dsdsdsds</p>
        </p>
    </p>
    </p>
    </p>
</p>

</body>

css:* {

font-family: Arial;
margin: 0 0;

}

body {

background: #333333;

}

.html {

font-size: 6px;
h1: 2rem;

}

.nav {

height: 3rem;
background-color: #000000;
padding-top: 1rem;

}

.nav>h1 {

color: #ffffff;
margin-left: 3rem;
display: inline-block;

}

.nav>ul {

position: absolute;
top: 1.4rem;
left: 20rem;
display: flex;
flex-flow: row-wrap;
list-style: none;
color: aliceblue;
width: 50rem;
flex-pack: justify;
justify-content: space-around;

}

selected {

position: relative;
top: 0.3rem;
background-color: #F5B23D;
height: 0.5rem;

}

.nav>ul>li {

font-size: 1.5rem;
width: 12rem;
justify-content: space-around;
text-align: center;

}

.nav>ul>li>p {

margin: auto;

}

.content {

display: flex;
flex-direction: row;
justify-content: space-between;
width: auto;
margin: 0;
padding: 1rem;
background-color: #333333;

}

.content p {

margin-top: 0.5rem;
width: auto;
height: 50rem;

}

left {

background-color: #1F1F1F;
margin-right: 1.5rem;
margin-left: 1rem;

}

right {

flex-grow: 16;

}

.rtab {

display: block;
text-align: center;
height: 30rem;
width: 10rem;
padding-top: 2rem;

}

.rtab>li {

line-height: 3rem;
list-style: none;
font-size: 1rem;
font-weight: bolder;
height: 3rem;
width: 10.5rem;
margin-left: -1.5rem;
margin-bottom: 2rem;
color: #acacac;

}
.rtab>li:first-child {

background-color:  #333333;
color: #ffffff;

}

search{

width: 36rem;
height: 2.5rem;

}

search-button{

width: 10rem;
margin-left: 1rem;
height: 2.5rem;
background-color: #65b59a;
color: aliceblue;
}

.oders{

background-color: #333333;
margin-top: 2rem;

}
.ctab{

margin-top: 1.5rem;
background-color: #000000;
color: aliceblue;
list-style: none;
height: 3.5rem;
margin-bottom: -0.5rem;

}
.ctab>li{

display: inline-block;
margin-right: 2rem;
width: 8rem;
text-align: center;
font-weight: 800;
height: 3rem;
line-height: 3rem;    

}
.ctab>li:first-child{

border-bottom: 0.5rem solid;

}
.allorders{

position: relative;
background-color: #c1c1c1;
padding-top: 0.5rem;
height: 10px;
width: 10px;

}

.order1{

background-color: aliceblue;
height: 1px;
margin: 1rem;
margin-top: 1rem;

}

.title{

height: 1rem;
background-color: bisque;
height: 1rem;

}

.userinfo{

height: 1rem;
background-color: aqua;

}
.lastt{

height: 1rem;
background-color: #161617;

}

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

membalas semua(2)
Peter_Zhu

你的高度是1px

左手右手慢动作

在想要的p里面加上css内联样式表就好了,比如

<p style="height:20px">BlaBla</p>

百度一下css获得更多

PS:这格式真难受= =||

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan