Question

所以我现在正在创建基本表单，我对这个小东西有一个问题，我希望别人能为我看一下。几个小时以来一直在尝试这件事。

我有一个span类，我想在标签下方出现。截至目前，跨度并排作为标签，我希望它在标签下方。这是我的html / css

CSS：

fieldset { width: 900px; }
input[type=text], select, textarea{width: 100%; }
span .half {float: left; width: 48%; padding: 1%; }
.half { float: left; width: 48%; padding: 1%; }
.full { clear: both; width: 100%; padding: 1%; }
.clear { clear: both; }
.right { text-align: right; }
/*little line breaks that separte sections*/
.generalinfo { padding-top: 10px;}
/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-align: left;
}
body {
    background: #DCDDDF url(http://pixelmatter.co/img/tweed_@2X.png);
    color: #000;
    font: 14px Arial;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
h1{ font-size:28px;text-transform:uppercase;margin-bottom: 2px;}
h2{ font-size:26px;}
h3{ font-size:18px;}
h4{ font-size:16px;}
h5{ font-size:14px;}
h6{ font-size:12px;}
h1,h2,h3,h4,h5,h6{ color:#34495e;}
small{ font-size:10px;}
b, strong{ font-weight:bold;}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.left { float:left; }
.right { float:right; }
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
.clearfix:after,
form:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


::-webkit-input-placeholder {
   color: #808488;
}

:-moz-placeholder { /* Firefox 18- */
   color: #808488;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #808488;  
}

:-ms-input-placeholder {  
   color: #808488;  
}

HTML：

<div class="half">
       <label for="abc">abc</label>
         <span class="half">abcabc</span>
</div>

Answer 1

所以在CSS中你可以......

label{
   float:left;
   width:100%;
}

并获取该范围的类并为其指定样式

span{
 float:left;
 width:100%;
}

所以这一点实际上只是给它们100％的宽度，所以它们占据了自己旁边的所有空间，从而迫使另一个元素（这种情况下是跨度）被推到另一条线。我想你只需要给标签100％的宽度，但按照你的代码你可能想要浮动它们。如果您不想尝试：

 label{
   width:100%;
}

Answer 2

你走了：

Heres a fiddle

<强> HTML：

<div class="half">
       <label for="abc">abc</label>
         <span class="half">abcabc</span>
</div>

<强>的CSS：

 label {
       display: block;
        float: left;
        clear: left; 
    }

span {
    display: block;
    float: left;
    clear: left;

}

Answer 3

你可能有几种方法可以做到这一点。但想到这种方式：

.half label, .half span {
    display:block;
}

注意： span和label默认显示内联。这是他们为什么以这种方式展示的根本原因。 reference

<强>演示：

http://jsfiddle.net/tmp4fgw5/

Answer 4

你可以尝试：

.half label, span.half { width:100%; float:left;}

Example fiddle

Answer 5

<span>，<label>，<a>是默认的inline元素，这就是它内联的原因。所以要实现，添加下面的CSS

label,span{
  display: block;
}

如何让span类出现在标签下面

5 个答案: