Question

在“主”div中，我有一堆跨度和输入。我希望这些能够到达主div的最左边，并且彼此相邻。他们在某种程度上进行了编程，这样就没有什么问题（跨度），并且在每个问题下都有一个答案部分（输入），正如我所说的那样，我想把它们放在主要部分的左边和下面。我该怎么做？

以下是代码：

html,body{
  height:100%;
}

*{
  margin:0;
  padding:0;
}
.wraper{
  height:100%;
  overflow:hidden;
}
.top {
  top:0;
  height: 92px;
  background:red;
}
.left {
  width: 178px;
  float:left;
  min-height:100%;
  background:#96C0CE;
}
.main {
  margin-left:178px;
  min-height:100%;
  background:#525564;
}
.space { 
  margin-top: 70px; 
}

<div class="wraper">
  <div class="top">
    <center><h1 style="color:white">Header</h1></center>
  </div>

  <div class="left">
    <span> Hello </span>
    AND ALOT MORE SPANS!!!
    <input/>
    AND ALOT MORE INPUTS
  </div>
  <div class="main">
    some content
  </div>
</div>

Answer 1

您的代码需要经过审核并且可以直接回答，所以我会回答您的问题。

如何将跨度转到div的左侧？

使用

float:left;

将移动到封装它的直接父级的左侧。

https://jsfiddle.net/9urk5rzd/1/

Answer 2

嘿......就这样做，非常简单！

我认为你的意思是

<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" type="text/css" href="copy.css" />
    </head>
    <body>
        <div class="wraper">  
          <div class="top">
          <center><h1 style="color: white;">Header</h1></center>
          </div>
        </div>             <!-- close this div please like i did  -->
        <div class="left">
           <form name='myform' id='myform'>
             <span>Question </span>
             <br/><!-- br/ is used break the line -->
             <input name="a1" id='a1'type="text" placeholder="answer" > 
             <br/>
             <span>Question </span>
             <br/>
             <input name="a2" id='a2' type="text" placeholder="answer" > 
             <br/>
             <span>Question </span>
             <br/>
             <input name="a3" id='a3' type="text" placeholder="answer" > 
             <br/>
             <span>Question </span>
             <br/>
             <input name="a4" id='a4' type="text" placeholder="answer"><!-- remove the close from the inputs like i did -->
           </form>
        </div>
        <div class="main">
          some content
        </div>
    </body>
</html>

现在好了css：

html,body{
height:100%; /* you don't need this REMOVE*/
}

*{
margin:0;
  padding:0;
}
body{
 background-color: green;/* I like green xD (put ur colors in hexa(for the browser compatibility(IE hates u and me)))*/


}
.wraper{
height:100%;
/*Stack*/ overflow:hidden;
}
.top {
  top:0; /* hum... ??*/
  height: 92px;
  background:red;
}
.left {
  width: 15%; /* ajust this as u want */
  float:left;
  min-height:100%; /* okay... */
  background:#96C0CE;
}
.main {
  margin-left:15%;
  height: 610px; /* adjust this as u need */
  background:#525564;
  width: 85%; /* if u adjust .left is recomendable to adjust .main too*/
}



.space { margin-top: 70px; }

如何使跨度位于div的左侧？

2 个答案:

嘿......就这样做，非常简单！

现在好了css：