html - 将文本字段和按钮保留在框内

Question

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

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

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

可以玩的 fiddle :http://jsfiddle.net/rkkw6uvg/1/

Answer 1

你在 .cc_margintop 中有一些 float 元素，所以它们会破坏它们的父元素并造成困惑。

您需要清除这些 float ，因此根据您的要求，这里有一些可能的解决方案:

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

查看 the solution 和下面的 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>