2
我剛開始嘗試建立一個高爾夫統計網站（僅僅爲了它的樂趣）。我對HTML和CSS非常陌生，並且在一個頁面上遇到了很多麻煩，而這些頁面的行爲並不像我期望的那樣。HTML CSS項目不會像我預期的那樣徘徊 - 居中
我已經將代碼削減了一點節省空間，但這裏是我得到的。 http://jsfiddle.net/fnnb1o6d/1/
我希望一切都像頂部文本框一樣居中，但那不會發生。我確定我有一些可怕的CSS和HTML在這裏發生，這就是爲什麼我會遇到問題，但我無法弄清楚它是什麼。
html和css也在下面。有人可以告訴我，我會如何得到這個行爲，因爲我想？ 非常感謝
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add Course</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="add_course">
<form action="add_course.php" method="post" enctype="multipart/form-data" name="add_course_form" id="add_course_form" onsubmit="return validate_form();">
<div class="add_course_lables">
<input class="add_course_name" name="coursename" type="text" id="coursename" size="30" placeholder="Course Name" maxlength="64" />
<br />
<input name="par" type="text" id="par" size="30" placeholder="Par" maxlength="2" />
<input name="rating" type="text" id="rating" size="30" placeholder="Rating" maxlength="2" />
<input name="slope" type="text" id="slope" size="30" placeholder="Slope" maxlength="3" />
<br />
</div>
<div style="min-width: 1000px; overflow: auto; display: table; width: 1000px; text-align:center" id="add_course_table">
<div>
<div style="width:60px" id="add_course_top_row">Hole</div>
<div id="add_course_top_row">1</div>
<div id="add_course_top_row">2</div>
<div id="add_course_top_row">3</div>
<div id="add_course_top_row">4</div>
<br style="clear: left;" />
</div>
<div>
<div id="add_course_other_rows_left">Par</div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par1"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par2"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par3"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par4"/></div>
<br style="clear: left;" />
</div>
<div>
<div id="add_course_other_rows_left">Length</div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length1"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length2"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length3"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length4"/></div>
<br style="clear: left;" />
</div>
<div>
<div id="add_course_other_rows_left">Index</div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index1"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index2"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index3"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index4"/></div>
</div>
</div>
<input type="submit" name="Submit" class="add_course_button" value="Add Course" />
</form>
</div>
</body>
</html>
CSS
.add_course_lables {
width: 500px;
height: 120px;
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
}
.add_course_lables input {
color: #16a085;
padding: 10px;
margin-top: 5px;
width:135px;
font-size: 15px;
border: 1px solid #16a085;
border-bottom: 2px solid #16a085;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
width:91.5%;
}
.add_course_lables input:focus {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button{
background: #16a085;
color: white;
border: 1px solid #16a085;
border-radius: 5px;
transition: background .4s linear;
padding: 10px;
font-weight: 600;
font-size: 20px;
cursor: pointer;
margin-top: 10px;
position: relative;
left: 50%;
right: 0%;
}
#add_course_top_row{
border-radius: 4px;
border-color: #FFFFFF;
border-style: solid;
background: #16A085;
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 0px;
width: 30px;
border-width: thin;
display: inline-flex;
}
#add_course_other_rows_left{
color: #16a085;
border-radius: 4px;
border-color: #16a085;
border-style: solid;
border-width: thin;
background: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 3px;
margin-top:2px;
width: 60px;
float:left;
}
#add_course_other_rows input {
color: #16a085;
border-radius: 5px;
border color:#BFBFBF;
border-style: solid;
border-width: thin;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align: center;
padding: 3px;
margin-top: 2px;
margin-right:3px;
width: 30px;
float:left;
}
#add_course_other_rows input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
好的，現在全部排序。感謝您的幫助，我在這個該死的頁面上花了大約12個小時，很高興它的工作。 http://jsfiddle.net/733b4e82/2/ – 2014-09-04 10:42:04