卡住試圖佈局我的領域

我是新來的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

卡住試圖佈局我的領域

回答

相關問題