Html 一直在尝试布局我的字段_Html_Css

Html 一直在尝试布局我的字段

html css

Html 一直在尝试布局我的字段,html,css,Html,Css,我是CSS新手，但我正在尝试创建以下布局：我试着对此感到奇怪，下面是我的代码：现在，我知道这是基本的，但我做错了什么另外，我希望它能够处理任何高度的字段（即非常高）添加.fieldwrapper{display:inline block} 由于div是block元素，它将显示在下一行中，所以将其设置为inline block，然后在同一行中流动演示以简单的形式，您可以删除输入周围的div，并按如下方式编写 <div class="r6 dc3 ts2 p4">

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

我试着对此感到奇怪，下面是我的代码：

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

另外，我希望它能够处理任何高度的字段（即非常高）

添加

.fieldwrapper{display:inline block}

由于div是block元素，它将显示在下一行中，所以将其设置为inline block，然后在同一行中流动

演示

以简单的形式，您可以删除输入周围的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}


发件人电子邮件地址

.lft{float:left；}
ul，li{列表样式类型：无；}
.ts3{字体大小：15px；}
.dc3{背景色：#808080；}
.tc5{颜色：#333333；}
.p4{填充：4px；}
.r2{边界半径：2px；-moz边界半径：2px；-webkit边界半径：2px；}
.r6{边界半径：6px；-moz边界半径：6px；-webkit边界半径：6px；溢出：自动}
.field{行高：27px；字体系列：arial，无衬线；边框颜色：#d9d9d9；边框顶部：实心1px#c0c0c0；左侧填充：5px；右侧空白：15px；宽度：250px；}
标签{float:left；padding right:15px}

演示

您希望标签和字段周围有一个“行”包装

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

要清除浮动，请将“行”设置为

溢出：隐藏
.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>

.formRow{
背景：#eee；
宽度：90%；
填充物：5px5%5px5%；
溢出：隐藏；
}
.formRow标签{
浮动：左；
}   
.formRow.field{
浮动：对；
} 
发件人电子邮件地址

这是一个非常基本的例子。您可以在此处使用宽度和高度-
给定的示例使用内联块。但是，图像显示文本垂直居中。您可以使用display:table cell

示例：
试试这个，可能你需要编辑尺寸、填充和颜色
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>


发件人电子邮件地址