divを移動しようとしています

私は赤いdivを「コーディングの世界へようこそ！」の下に移動しようとしています。ヘッダーdiv、しかし私はそれを行うように見えることはできません。私は、コードで初心者のビットですので、任意の助けもいただければ幸いです！（良く取得するか、いずれかのミスを修正することは、あまりにも参考になる方法上の任意のヒント！）divを移動しようとしています

h1 { 
 
    font-family: 'Slabo 27px', serif; 
 
    color: white; 
 
} 
 
.box { 
 
    background-color: #282A29; 
 
    text-align: center; 
 
    padding-top: 10px; 
 
    width: 1000px; 
 
    height: 90px; 
 
    margin: 0 auto; 
 
} 
 
.ul { 
 
    background-color: red; 
 
    color: white; 
 
    height: 400px; 
 
    width: 200px; 
 
    text-align: center; 
 
    float: left; 
 
    position: absolute; 
 
} 
 
ul { 
 
    padding-left: 185px; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
} 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    padding-top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<html> 
 
<head> 
 
    <title>Hello!</title> 
 
    <link rel="stylesheet" href="Shaw Academy CSS.css"> 
 
    <link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 
    <div class="box"> 
 
    <h1> Welcome to the World of Coding! </h1> 
 
    </div> 
 

 
    <div class="ul"> 
 
    <ul> 
 
     <li>Please</li> 
 
     <li>Let me</li> 
 
     <li>Pass</li> 
 
     <li>This course</li> 
 
    </ul> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-07-03 Nalsinan

それが下にある、あなたは試してみて、あなたが何をしたいの画像を表示することができます？ – dippas

これを試してみてください。

HTML：

<body> 
    <h1>Welcome to the World of Coding! </h1> 
    <ul> 
     <li>Please</li> 
     <li>Let me</li> 
     <li>Pass</li> 
     <li>This course</li> 
    </ul> 
</body>

CSS：

h1 { 
     text-align:center; 
    } 

    ul { 
     background-color:red; 
     color:white; 
     list-style-type:none; 
     width:200px; 
     float:right; 
    }

出典

2016-07-03 03:14:20

pxにはfixedの幅が与えられています。その理由は、常に%の幅を与えて自動的に画面サイズに合わせるようにします。必要がある場合は、pxを使用してください。あなたは.ulは右になりたい場合は

、その後フロートを使用します。右 CSSの

body{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 
h1 { 
 
    font-family: 'Slabo 27px', serif; 
 
    color: white; 
 
} 
 
.box { 
 
    background-color: #282A29; 
 
    text-align: center; 
 
    padding-top: 10px; 
 
    width: 100%; 
 
    height: 90px; 
 
    margin: 0 auto; 
 
} 
 
.ul { 
 
    background-color: red; 
 
    color: white; 
 
    height: 400px; 
 
    width: 60%; 
 
    text-align: center; 
 
    margin:0px auto; 
 
    overflow:hidden; 
 
} 
 
ul { 
 
    //padding-left: 185px; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
} 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    padding-top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<html> 
 
<head> 
 
    <title>Hello!</title> 
 
    <link rel="stylesheet" href="Shaw Academy CSS.css"> 
 
    <link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 
    <div class="box"> 
 
    <h1> Welcome to the World of Coding! </h1> 
 
    </div> 
 

 
    <div class="ul"> 
 
    <ul> 
 
     <li>Please</li> 
 
     <li>Let me</li> 
 
     <li>Pass</li> 
 
     <li>This course</li> 
 
    </ul> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-07-03 05:34:46

divを移動しようとしています

答えて

関連する問題