Question

我是CSS的新手，但我正在尝试创建此布局：

Layout

我试图对此有所了解，这是我的代码：

http://jsfiddle.net/cskQ8/

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

P.s我希望这能应付任何高度的领域（即很高）

Answer 1

添加.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}

demo http://jsfiddle.net/cskQ8/11/

Answer 2

您需要在标签和字段周围添加“行”包装。

然后将标签向左和右侧浮动。

要清除浮动，请将“行”设置为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/

Answer 3

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

示例：http://jsfiddle.net/cskQ8/12/

Answer 4

试试这个，可能你需要编辑大小，填充和颜色......

css =＆gt;

@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 =＆gt;

<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>

坚持尝试布局我的领域

4 个答案: