卡住试图布局我的领域

我是新来的CSS，但我想创建这样的布局：卡住试图布局我的领域

Layout

我试图拥有这一个怪人，这里是我的代码：

http://jsfiddle.net/cskQ8/

现在，我知道这是基本的，但我究竟做错了什么？

诗我想这是应付任何高度（即非常高）

来源

2012-10-09 James Willson

的领域添加.fieldwrapper{display:inline-block}

由于DIV是块元素，它是下一行中得到显示，从而使内联块然后它在同一行中流动。

演示here

在简单的形式，你可以删除DIV围绕输入，写像下面

<div class="r6 dc3 ts2 p4"> 
    <label field_id="None" for="sender">Sender email address</label> 
    <input class="field r2 lft dc1 tc5 ts3" placeholder="Email" type="text" value=""> 
    </div> 

.lft { float: left; } 
ul, li { list-style-type: none; } 
.ts3 { font-size: 15px; } 
.dc3 { background-color: #808080; } 
.tc5 { color: #333333; } 
.p4 { padding: 4px; } 
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } 
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; overflow:auto} 
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; padding-left:5px; margin-right: 15px; width:250px; } 
label{float:left; padding-right:15px}

演示http://jsfiddle.net/cskQ8/11/

来源

2012-10-09 09:19:27 Sowmya

你想围绕标签中的 “行” 的包装和场。

然后您将标签左侧和右侧的字段浮动。

要清除设置“行”花车以overflow: hidden;

.formRow { 
    background: #eee; 
    width: 90%; 
    padding: 5px 5% 5px 5%; 
    overflow: hidden; 
} 

.formRow label { 
    float: left; 
} 

.formRow .field{ 
    float: right; 
} 

<div class="formRow"> 
    <label field_id="None" for="sender">Sender email address</label> 
    <input class="field r2 lft dc1 tc5 ts3" placeholder="Email" type="text" value=""> 
</div>

这是一个非常简单的例子。你可以在这里玩弄宽度和高度 - http://jsfiddle.net/spacebeers/cskQ8/8/

来源

2012-10-09 09:20:12 SpaceBeers

给出的例子使用inline-block。但是，您的图像显示文字是垂直居中的。你可以使用display: table-cell。

实施例：http://jsfiddle.net/cskQ8/12/

来源

2012-10-09 09:32:53

尝试此，可以是U需要编辑的大小，填充和颜色....

CSS =>

@charset "utf-8"; 

    body{ 
     margin:auto;/*for aligning*/ 
     padding:0; /*for squeezing in txt*/ 
     height:100%; /*100% used to fill windows height*/ 
     behaviour:url(csshover.htc); 

    } 

    .header{ 
     margin:auto;/*for aligning*/ 
     padding:5px; 
     height:30px; 
     width:100%; 
     background-color:#808080; 
    } 
    .header .holder{ 
     margin:auto; 
     padding:0; 
     height:30px; 
     width:1018px; 
     background-color:#333333; 
    } 

    .lft { 
     float: left; 
    } 

    ul, li { 
     list-style-type: none; 
    } 

    .tc5 { 
     color:black; 
    } 



    .r2 { 
     border-radius: 2px; 
     -moz-border-radius: 2px; 
     -webkit-border-radius: 2px; 
    } 



    .field { 
     line-height:27px; 
     font-family:arial, sans-serif; 
     border-color: blue; 
     border-top:solid 1px #c0c0c0; 
     padding-left:5px; 
     margin-right: 15px; 
     width:250px; 
    }

HTML =>

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link href="new.css" rel="stylesheet" type="text/css" />  
</head>  
<body> 
    <div class="header"> 
     <div class="holder"> 
      <label field_id="None" for="sender"align="left">Sender email address</label> 
      <input class="field r2 lft tc5 " placeholder="Email" type="text" value=""> 
      <div class="fieldwrapper"> 
      </div> 
     </div> 
    </div>  
</body> 
</html>

来源

2012-10-09 10:01:44

卡住试图布局我的领域

回答

相关问题