Question

我试图将红色div移动到＃34;欢迎来到编码世界！＆＃34;标题div，但我似乎无法做到。我有点像编码的初学者，所以任何帮助都会非常感激！（关于如何改进或纠正任何错误的任何提示也会有所帮助！）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您fixed px的宽度是%的原因，总是在px中给出宽度，以便自动调整到屏幕尺寸。在需要时使用.ul。

如果你希望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%; }在右边，那么在css中使用 float：right

＆＃13;

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

＆＃13;

/* Custom CSS */
[class^="col-"] {
  padding: 40px 5px 4px 4px;
  background: red
}

＆＃13;

Answer 2

试试这个：

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

试图移动div

2 个答案: