Question

我知道有类似的问题已被问到，但我找不到他们的问题的答案。我试图移动主要从左侧原点开始250 px，但当我创建一个包装并试图设计它没有做任何事情。

＆＃13;

/* site.css */

body{
    font-family:sans-serif;
    font-size: 14px;
    margin:0;
}
label{
    font-weight:bold;
    display:block;
}
input[type=text], input[type=password], textarea{
    width:150px;
}

#main{
    background-color: #eee;
    padding:4px;
    margin:0;
}
#footer{
    background-color:#222;
    color:#eee;
    padding:8px 4px;
    position:fixed;
    width:100%;
    bottom:0;
}
.Headshot{
    max-width: 50px;
    border: 1px solid #222;
    padding: 3px;
  
}

.menu{
    font-size:11px;
}

.menu li{
    list-style-type: none;
}

.menu li.active {
    font-weight:bold;
}
#sidebar {
    background:#2a2c36;
    color:#eee;   
    position:fixed;
    height:100%;
    width:250px;
    overflow:hidden;   
    left:0;
    margin:0;
}

#wrapper{
    left:0 0 0 250px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>The World</title>
    <meta charset="utf-8" />
   <link rel="stylesheet" href="css/site.css" />

</head>
<body>
    <div id="sidebar">
        <img src="img/user1.jpg" alt="Headshot" class="Headshot"/>
        <span>Sam Hastings </span>
        <ul class="menu">
            <li class="active"><a href="#" >Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="wrapper">
        <div id="main">
            <h3>The World</h3>
            <p>Ofineo website</p>
            <form>
                <div>
                    <label>Date</label>
                    <input />
                </div>
                <div>
                    <label>Location</label>
                    <input />
                </div>
                <div>   <input type="submit" value="add" /></div>
            </form>
        </div>
        <div id="footer">
            &copy; 2015 the world Ltd.
        </div>
    </div>

</body>
</html>

＆＃13;

Answer 1

Css propiety 左必须用position:relative（或绝对，固定）声明。
并设置1个属性。 left:250px，而非left: 0 0 0 250px

#wrapper{
    left:250px;
    position:relative;
}

Answer 2

如果您不想使用职位，请使用margin。

替换

#wrapper{
    left:0 0 0 250px;
}

用

#wrapper{
    margin:0 0 0 250px;
}

这是代码

＆＃13;

/* site.css */

body {
  font-family: sans-serif;
  font-size: 14px;
  margin: 0;
}

label {
  font-weight: bold;
  display: block;
}

input[type=text],
input[type=password],
textarea {
  width: 150px;
}

#main {
  background-color: #eee;
  padding: 4px;
  margin: 0;
}

#footer {
  background-color: #222;
  color: #eee;
  padding: 8px 4px;
  position: fixed;
  width: 100%;
  bottom: 0;
}

.Headshot {
  max-width: 50px;
  border: 1px solid #222;
  padding: 3px;
}

.menu {
  font-size: 11px;
}

.menu li {
  list-style-type: none;
}

.menu li.active {
  font-weight: bold;
}

#sidebar {
  background: #2a2c36;
  color: #eee;
  position: fixed;
  height: 100%;
  width: 250px;
  overflow: hidden;
  left: 0;
  margin: 0;
}

#wrapper {
  margin: 0 0 0 250px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>The World</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/site.css" />

</head>

<body>
  <div id="sidebar">
    <img src="img/user1.jpg" alt="Headshot" class="Headshot" />
    <span>Sam Hastings </span>
    <ul class="menu">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div id="wrapper">
    <div id="main">
      <h3>The World</h3>
      <p>Ofineo website</p>
      <form>
        <div>
          <label>Date</label>
          <input />
        </div>
        <div>
          <label>Location</label>
          <input />
        </div>
        <div> <input type="submit" value="add" /></div>
      </form>
    </div>
    <div id="footer">
      &copy; 2015 the world Ltd.
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 3

将margin-left添加到#main，因为这就是您所说的内容。

＆＃13;

/* site.css */

body{
    font-family:sans-serif;
    font-size: 14px;
    margin:0;
}
label{
    font-weight:bold;
    display:block;
}
input[type=text], input[type=password], textarea{
    width:150px;
}

#main{
    background-color: #eee;
    padding:4px;
    margin-left:250px;
}
#footer{
    background-color:#222;
    color:#eee;
    padding:8px 4px;
    position:fixed;
    width:100%;
    bottom:0;
}
.Headshot{
    max-width: 50px;
    border: 1px solid #222;
    padding: 3px;
  
}

.menu{
    font-size:11px;
}

.menu li{
    list-style-type: none;
}

.menu li.active {
    font-weight:bold;
}
#sidebar {
    background:#2a2c36;
    color:#eee;   
    position:fixed;
    height:100%;
    width:250px;
    overflow:hidden;   
    left:0;
    margin:0;
}

#wrapper{
    left:0 0 0 250px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>The World</title>
    <meta charset="utf-8" />
   <link rel="stylesheet" href="css/site.css" />

</head>
<body>
    <div id="sidebar">
        <img src="img/user1.jpg" alt="Headshot" class="Headshot"/>
        <span>Sam Hastings </span>
        <ul class="menu">
            <li class="active"><a href="#" >Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="wrapper">
        <div id="main">
            <h3>The World</h3>
            <p>Ofineo website</p>
            <form>
                <div>
                    <label>Date</label>
                    <input />
                </div>
                <div>
                    <label>Location</label>
                    <input />
                </div>
                <div>   <input type="submit" value="add" /></div>
            </form>
        </div>
        <div id="footer">
            &copy; 2015 the world Ltd.
        </div>
    </div>

</body>
</html>

＆＃13;

CSS无法识别div标签中的标识符（ID）。

3 个答案: