0

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

布局

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

http://jsfiddle.net/cskQ8/

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

Ps 我希望它能够应对任何高度的领域（即非常高）

4

4 回答 4

1

添加.fieldwrapper{display:inline-block}

由于 div 是块元素，它会显示在下一行中，因此使其成为内联块，然后它会在同一行中流动。

演示在这里

以简单的形式，您可以删除输入周围的 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-09T09:19:27.707 回答
1

您需要一个围绕标签和字段的“行”包装器。

然后，您将标签向左浮动，字段向右浮动。

要清除浮动，请将“行”设置为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-09T09:20:12.750 回答
0

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

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

于 2012-10-09T09:32:53.920 回答
0

试试这个，可能你需要编辑尺寸、填充和颜色....

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-09T10:01:44.190 回答