联系表格CSS

时间：2016-11-16 03:32:55

标签： css forms contact

需要帮助以整个表单为中心。还希望表单在浏览器窗口变得越来越小时保持居中，并使输入字段相应地进行调整。

它似乎是半中心，左半对齐，但我玩了它并且它不想移动......

＆＃13;
＆＃13; 
/* CSS goes below this line! */

#ois-2 .ois-14-button, #ois-2 input[type='submit'].ois-14-button {
	background-color: #fd3f3f !important;
	border-color: #fd3f3f !important;
	border-width: 0px !important;
	font-size: 16px !important;
	font-family: 'Helvetica', Helvetica, sans-serif !important;
	height: 31px !important;
	border-radius: 7px !important;
	color: #ffffff !important;
	font-weight: 400 !important;
	width: 200px !important
}
#ois-2 .ois-14-email-input {
	padding-bottom: 4px !important;
	padding-left: 5px !important;
	padding-right: 2px !important;
	padding-top: 4px !important;
	text-align: left !important;
	width: 200px !important;
	border-radius: 5px !important;
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}
#ois-2 .ois-14-Name-input {
	padding-bottom: 4px !important;
}
#ois-2 .ois-14-name-input {
	padding-left: 5px !important;
	padding-right: 2px !important;
	padding-top: 4px !important;
	text-align: left !important;
	width: 200px !important;
	border-radius: 5px !important;
	margin-top: 10px !important;
	margin-bottom: 0px !important;
}

#ois-2 .ois-14-title {
	text-align: center !important;
	font-size: 18px !important;
	font-family: 'Helvetica', Helvetica, sans-serif !important;
	line-height: 21px !important;
	font-weight: 700 !important;
	margin-top: 0px !important;
	margin-bottom: 10px !important;
}
#ois-2 .ois-14-inner {
	border-color: #efefef !important;
	border-width: 1px !important;
	background-color: #e2e2e2 !important;
	border-radius: 4px !important;
	padding-bottom: 10px !important;
	padding-top: 10px !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
}
#ois-2 .ois-14-outer {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 0px;
}
#ois-2 .ois-14-form {
	text-align: center !important;
}

fieldset { float: left; width: 200px; border: 0; padding: 0; margin: 0;}
#left {margin-right: 20px; }
#right { margin-right: 0px; }
label {float: left;}
input {clear: both;; float: left}


/* End custom style */
/* End of file */
＆＃13; 
<div class='ois-design'>

	<div id='ois-2' class='ois-design' >
<div class="ois-outer ois-14-outer">
	
<div class="ois-14-inner ois-inner">

<div class="ois-14-title">
Enter your name & email for access to our class schedule and amazing web special!</div>
		
<div class="ois-14-subtitle"></div>
		
		
<div class="ois-14-form">
			
<form method="post" id="ois-form-2" data-service="aweber" >
<div class="ois-14-name-input-wrapper">
<fieldset id="left">
<input type="text" name="name" class="ois-14-name-input ois-name-input ois-form-control" placeholder="Your Name"></fieldset>

<fieldset id="right">
<input type="text" name="email" class="ois-14-email-input ois-email-input ois-form-control" placeholder="Your Email"></fieldset>
</div>

<div class="ois-14-button-wrapper">

<input type="submit" class="ois-btn ois-14-button" />
</div>
</form>
		</div>
	
</div>

</div>
</div>

</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

我已经更改了一些内容，特别是删除了输入上的所有浮动内容，更清楚地重新构建了div，并在表单中添加了margin: auto。我还建议重新考虑你的标记并减少课程。其中很多都是多余的，并做同样的事情。 

fieldset { 
    display: inline-block;
    width: 200px; 
    border: 0; 
    padding: 0; 
    margin: 0;
}

＆＃13;
＆＃13; 
#ois-2 .ois-14-button, #ois-2 input[type='submit'].ois-14-button {
    background-color: #fd3f3f !important;
    border-color: #fd3f3f !important;
    border-width: 0px !important;
    font-size: 16px !important;
    font-family: 'Helvetica', Helvetica, sans-serif !important;
    height: 31px !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    width: 200px !important
}
#ois-2 .ois-14-email-input {
    padding-bottom: 4px !important;
    padding-left: 5px !important;
    padding-right: 2px !important;
    padding-top: 4px !important;
    text-align: left !important;
    width: 200px !important;
    border-radius: 5px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin: auto;
}
#ois-2 .ois-14-Name-input {
    padding-bottom: 4px !important;
}
#ois-2 .ois-14-name-input {
    padding-left: 5px !important;
    padding-right: 2px !important;
    padding-top: 4px !important;
    text-align: left !important;
    width: 200px !important;
    border-radius: 5px !important;
    margin-top: 10px !important;
    margin-bottom: 0px !important;
    margin: auto;
}

#ois-2 .ois-14-title {
    text-align: center !important;
    font-size: 18px !important;
    font-family: 'Helvetica', Helvetica, sans-serif !important;
    line-height: 21px !important;
    font-weight: 700 !important;
    margin-top: 0px !important;
    margin-bottom: 10px !important;
}
#ois-2 .ois-14-inner {
    border-color: #efefef !important;
    border-width: 1px !important;
    background-color: #e2e2e2 !important;
    border-radius: 4px !important;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
#ois-2 .ois-14-outer {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
}
#ois-2 .ois-14-form {
    text-align: center !important;
    margin:auto;
}

body {
    /*width: 500px;*/
}

fieldset { 
    display: inline-block;
    width: 200px; 
    border: 0; 
    padding: 0; 
    margin: 0;
}
＆＃13; 
<body>
    <div class='ois-design'>

        <div id='ois-2' class='ois-design' >
            <div class="ois-outer ois-14-outer">
                <div class="ois-14-inner ois-inner">
                    <div class="ois-14-title">
                        Enter your name &amp; email for access to our class schedule and amazing web special!
                    </div>
            
                    <div class="ois-14-subtitle"></div>
                </div>
            </div>
            
        <div class="ois-14-form">       
            <form method="post" id="ois-form-2" data-service="aweber" >
                <div class="ois-14-name-input-wrapper">
                    <fieldset id="left">
                        <input type="text" name="name" class="ois-14-name-input ois-name-input ois-form-control" placeholder="Your Name" />
                    </fieldset>

                    <fieldset id="right">
                        <input type="text" name="email" class="ois-14-email-input ois-email-input ois-form-control" placeholder="Your Email">
                    </fieldset>
                </div>

                <div class="ois-14-button-wrapper">
                    <input type="submit" class="ois-btn ois-14-button" />
                </div>
            </form>
        </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您无需使输入字段浮动

使用宽度，您可以使用

input[type="text"] {
   width: 30vw;
}

下面的Jsfiddle

https://jsfiddle.net/fae4xb7e/

相关问题
最新问题