将文本字段和按钮保留在框中

我有一个简单的问题，我发誓我已经做了一百次，但我想我需要另一双眼睛。

我有一个表格，输入电子邮件文本字段和一个添加电子邮件按钮都在一个框中。当我向表格添加更多电子邮件时，它会将文本字段和按钮推出框外。文本字段和按钮需要并排。

<div class="cc_halfblock">
        <div class="dropshadow">
            <div class="dropshadow-heading">
                Heading
            </div>

    <form id="emailform" name="emailform" method="POST">
        <table class="cc_table">
            <tbody>
                    <tr>
                        <td>
                                foo@bar.com
                        </td>
                        <td>
                            <button class="deletebutton cc_icon_button" name="delete_email"
                                    value="Delete" title="Delete this email" 
                            </button>
                            <input type="hidden" name="email_address" value="" />
                        </td>
                    </tr>
...
                </tbody>
            </table>
           </form>

            <div class="cc_margintop">
            <form id="addemailform" name="addemailform" method="POST">
                    <div class="cc_separator">
                        <input type="text" size="24" maxlength="64" name="add_email" placeholder="Enter email" id="add_email" />
                    </div>
                    <div class="cc_separator">
                        <button class="addbutton cc_button_enable pull-right" name="submitemail">Add Email</button>
                    </div>
                    <div id="cc_emailerrors"></div>
            </form>
            </div>
        </div>
    </div>

.CSS：

.cc_button_enable {
    margin-bottom: 5px;
    float: left;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border: 1px solid #999;
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    margin-right: 0.1em;
    overflow: visible;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: middle;
    padding: 0.4em 1em;
    font-family: Lucida Grande,Lucida Sans Unicode,Arial,Verdana,sans-serif;
    font-size: 1.1em;
}
.dropshadow-heading {
    background-color: #cccccc;
    color: #28292A;
    font-size: 22px;
    padding: 10px 15px;
    text-transform: uppercase;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: 'Open Sans', sans-serif;
}
.dropshadow-body {
    padding: 1px 15px 15px 15px;
    font-family: 'Open Sans', sans-serif;
}

.dropshadow {
    font-family: 'Open Sans', sans-serif;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
    min-height: 200px;
    margin-left:15px;
    margin-bottom:15px;
    background-color:#ffffff;
    border: 1px solid #CCCCCC;
}
.cc_table {
    border-collapse: collapse;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    table-layout: auto;
    text-align: left;
    white-space: nowrap;
    /* display:inline-block; */
    width: 100%;
}
.cc_table th 
{
    background: none repeat scroll 0 0 rgb(230, 230, 230);
    border-bottom: 1px solid #2B3D61;
    border-top: 2px solid white;
    color: rgb(165, 165, 165);
    font-size: 14px;
    font-weight: normal;
    padding: 8px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.cc_table td {
    background: none repeat scroll 0 0 #ffffff;
    border-bottom: 1px solid #2B3D61;
    border-top: 1px solid transparent;
    color: #333333;
    padding: 8px;
}
.cc_table tr:hover td {
    background: none repeat scroll 0 0 #a8cb17;
    color: #333399;
}
/* Used for spacing between form fields and buttons */
.cc_separator {
    float: left;
    margin-left: 10px;
}
/* generic spacing for divs on top */
.cc_margintop {
    margin-top: 25px;
}
#addemailform label.error {
        color: red;
        display: block;
}

/* generic float left */
.cc_floatleft {
    float: left;
}

/* blocks used for main content */
.cc_halfblock {
    width:45%;
    float: left;
    margin-left: 20px;
    min-height: 1px;
}

小

提琴：http://jsfiddle.net/rkkw6uvg/1/

你.cc_margintop里面有一些浮动元素，所以它们会破坏父母的束缚并造成混乱。

您需要清除这些浮点数，因此根据您的要求，这里有一些可能的解决方案：

在.cc_margintop上添加overflow:hidden规则
在.cc_margintop上使用一个很好的旧 clearfix 方法，如下所示：

查看解决方案和下面的清除修复：

.cc_margintop:after{
    content: '';
    display: table;
    clear: both;
}

.cc_button_enable {
	margin-bottom: 5px;
	float: left;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	border: 1px solid #999;
	cursor: pointer;
    display: inline-block;
    line-height: normal;
    margin-right: 0.1em;
    overflow: visible;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: middle;
    padding: 0.4em 1em;
    font-family: Lucida Grande,Lucida Sans Unicode,Arial,Verdana,sans-serif;
    font-size: 1.1em;
}
.dropshadow-heading {
    background-color: #cccccc;
    color: #28292A;
    font-size: 22px;
    padding: 10px 15px;
    text-transform: uppercase;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
	font-family: 'Open Sans', sans-serif;
}
.dropshadow-body {
    padding: 1px 15px 15px 15px;
	font-family: 'Open Sans', sans-serif;
}
.dropshadow {
	font-family: 'Open Sans', sans-serif;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 5px 5px 5px #ccc;
	-webkit-box-shadow: 5px 5px 5px #ccc;
	box-shadow: 5px 5px 5px #ccc;
	min-height: 200px;
	margin-left:15px;
	margin-bottom:15px;
	background-color:#ffffff;
	border: 1px solid #CCCCCC;
}
.cc_table {
    border-collapse: collapse;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    table-layout: auto;
    text-align: left;
    white-space: nowrap;
    /* display:inline-block; */
    width: 100%;
}
.cc_table th 
{
    background: none repeat scroll 0 0 rgb(230, 230, 230);
    border-bottom: 1px solid #2B3D61;
    border-top: 2px solid white;
    color: rgb(165, 165, 165);
    font-size: 14px;
    font-weight: normal;
    padding: 8px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.cc_table td {
    background: none repeat scroll 0 0 #ffffff;
    border-bottom: 1px solid #2B3D61;
    border-top: 1px solid transparent;
    color: #333333;
    padding: 8px;
}
.cc_table tr:hover td {
    background: none repeat scroll 0 0 #a8cb17;
    color: #333399;
}
/* Used for spacing between form fields and buttons */
.cc_separator {
	float: left;
	margin-left: 10px;
}
/* generic spacing for divs on top */
.cc_margintop {
	margin-top: 25px;
    overflow: hidden;/*clear those pesky floats*/
}
#addemailform label.error {
        color: red;
        display: block;
}
/* generic float left */
.cc_floatleft {
	float: left;
}
/* blocks used for main content */
.cc_halfblock {
	width:45%;
	float: left;
    margin-left: 20px;
    min-height: 1px;
}

<div class="cc_halfblock">
		<div class="dropshadow">
			<div class="dropshadow-heading">
				Heading
			</div>
	<form id="emailform" name="emailform" method="POST">
		<table class="cc_table">
			<tbody>
					<tr>
						<td>
								foo@bar.com
					    </td>
						<td>
							<button class="deletebutton cc_icon_button" name="delete_email"
									value="Delete" title="Delete this email" 
							</button>
							<input type="hidden" name="email_address" value="" />
						</td>
					</tr>
                        
                        <tr>
						<td>
								foo1@bar.com
					    </td>
						<td>
							<button class="deletebutton cc_icon_button" name="delete_email"
									value="Delete" title="Delete this email" 
							</button>
							<input type="hidden" name="email_address" value="" />
						</td>
					</tr>
                            
                            <tr>
						<td>
								foo2@bar.com
					    </td>
						<td>
							<button class="deletebutton cc_icon_button" name="delete_email"
									value="Delete" title="Delete this email" 
							</button>
							<input type="hidden" name="email_address" value="" />
						</td>
					</tr>
                                
                                <tr>
						<td>
								foo3@bar.com
					    </td>
						<td>
							<button class="deletebutton cc_icon_button" name="delete_email"
									value="Delete" title="Delete this email" 
							</button>
							<input type="hidden" name="email_address" value="" />
						</td>
					</tr>
                                    
                                    <tr>
						<td>
								foo4@bar.com
					    </td>
						<td>
							<button class="deletebutton cc_icon_button" name="delete_email"
									value="Delete" title="Delete this email" 
							</button>
							<input type="hidden" name="email_address" value="" />
						</td>
					</tr>
                </tbody>
            </table>
           </form>
			<div class="cc_margintop">
			<form id="addemailform" name="addemailform" method="POST">
					<div class="cc_separator">
						<input type="text" size="24" maxlength="64" name="add_email" placeholder="Enter email" id="add_email" />
					</div>
					<div class="cc_separator">
						<button class="addbutton cc_button_enable pull-right" name="submitemail">Add Email</button>
					</div>
					<div id="cc_emailerrors"></div>
			</form>
			</div>
		</div>
	</div>

你的答案：http://jsfiddle.net/rkkw6uvg/2/

我拿出了两个浮子，甚至不需要清除任何东西。

我拿出的第一个花车是在这个班级：.cc_button_enable第二：在课堂上：.cc_separator

请参阅下面的代码。

标签<input type='button' />是自动关闭的，不要使用<button></button>
注意课堂dropshadow。我添加了clear: both;和display: inline-block;来解决您的特定问题。

.cc_button_enable {
	margin-bottom: 5px;
	float: left;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	border: 1px solid #999;
	cursor: pointer;
    display: inline-block;
    line-height: normal;
    margin-right: 0.1em;
    overflow: visible;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: middle;
    padding: 0.4em 1em;
    font-family: Lucida Grande,Lucida Sans Unicode,Arial,Verdana,sans-serif;
    font-size: 1.1em;
}
.dropshadow-heading {
    background-color: #cccccc;
    color: #28292A;
    font-size: 22px;
    padding: 10px 15px;
    text-transform: uppercase;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
	font-family: 'Open Sans', sans-serif;
}
.dropshadow-body {
    padding: 1px 15px 15px 15px;
	font-family: 'Open Sans', sans-serif;
}
.dropshadow {
    clear: both;
    display: inline-block;
	font-family: 'Open Sans', sans-serif;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 5px 5px 5px #ccc;
	-webkit-box-shadow: 5px 5px 5px #ccc;
	box-shadow: 5px 5px 5px #ccc;
	/* min-height: 290px; */
	margin-left:15px;
	margin-bottom:15px;
	background-color:#ffffff;
	border: 1px solid #CCCCCC;
}
.cc_table {
    border-collapse: collapse;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    table-layout: auto;
    text-align: left;
    white-space: nowrap;
    /* display:inline-block; */
    width: 100%;
}
.cc_table th 
{
    background: none repeat scroll 0 0 rgb(230, 230, 230);
    border-bottom: 1px solid #2B3D61;
    border-top: 2px solid white;
    color: rgb(165, 165, 165);
    font-size: 14px;
    font-weight: normal;
    padding: 8px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.cc_table td {
    background: none repeat scroll 0 0 #ffffff;
    border-bottom: 1px solid #2B3D61;
    border-top: 1px solid transparent;
    color: #333333;
    padding: 8px;
}
.cc_table tr:hover td {
    background: none repeat scroll 0 0 #a8cb17;
    color: #333399;
}
/* Used for spacing between form fields and buttons */
.cc_separator {
	float: left;
	margin-left: 10px;
}
/* generic spacing for divs on top */
.cc_margintop {
	margin-top: 25px;
}
#addemailform label.error {
        color: red;
        display: block;
}
/* generic float left */
.cc_floatleft {
	float: left;
}
/* blocks used for main content */
.cc_halfblock {
	width:45%;
	float: left;
    margin-left: 20px;
    min-height: 1px;
}

<div class="cc_halfblock">
		<div class="dropshadow">
			<div class="dropshadow-heading">
				Heading
			</div>
	<form id="emailform" name="emailform" method="POST">
   		<table class="cc_table">
			<tr>
				<td>foo@bar.com</td>
				<td>
                    <button class="deletebutton cc_icon_button" name="delete_email" value="Delete" title="Delete this email" />
					<input type="hidden" name="email_address" value="" />
				</td>
			</tr> 
            <tr>
			  <td>foo1@bar.com</td>
			  <td>
                <button class="deletebutton cc_icon_button" name="delete_email" value="Delete" title="Delete this email" />
				<input type="hidden" name="email_address" value="" />
			  </td>
	       </tr>          
            <tr>
				<td>foo2@bar.com</td>
				<td>
                    <button class="deletebutton cc_icon_button" name="delete_email" value="Delete" title="Delete this email" />
					<input type="hidden" name="email_address" value="" />
				</td>
			</tr>
            <tr>
				<td>foo3@bar.com</td>
				<td>
                    <button class="deletebutton cc_icon_button" name="delete_email" value="Delete" title="Delete this email" />
					<input type="hidden" name="email_address" value="" />
				</td>
			</tr>
            <tr>
				<td>foo4@bar.com</td>
				<td>
					<button class="deletebutton cc_icon_button" name="delete_email" value="Delete" title="Delete this email" />
					<input type="hidden" name="email_address" value="" />
                </td>
			</tr>
        </table>
    </form>
	<div class="cc_margintop">
		<form id="addemailform" name="addemailform" method="POST">
			<div class="cc_separator">
				<input type="text" size="24" maxlength="64" name="add_email" placeholder="Enter email" id="add_email" />
			</div>
			<div class="cc_separator">
				<div class="addbutton cc_button_enable pull-right" name="submitemail">Add Email</div>
			</div>
			<div id="cc_emailerrors"></div>
		</form>
	</div>
	
  </div>
</div>

相关内容

最新更新

热门标签：