大家好,
我正在使用HTML / CSS,并使用CSS类
将此表置于页面中心.tablecenter { margin-left:auto; margin-right:auto; }
我在桌子后面也有这个按钮:
<input type = "button" value = "Create Listening GIFT" style="???">
但是,正如您在图片中看到的那样,按钮直接在左侧绘制。
我想要什么:我希望从桌子第一列开始的位置绘制我的按钮。此外,因为当我改变浏览器页面大小时,表格的左边距也会改变,我希望按钮“跟随”表并分别改变其左边距。换句话说,无论我如何更改浏览器窗口大小,我都希望我的按钮完全位于表格下方。
我该怎么做?
CODE:
<div>
<table class = "tablecenter">
<thead>
<tr>
<th style="height:80px">
<span class="tableheader">Listening - Part 1</span>
</th>
<th style="height:80px">
<span class="tableheader">Listening - Part 2</span>
</th>
<th style="height:80px">
<span class="tableheader">Listening - Part 3</span>
</th>
</tr>
</thead>
<!-- Listening - Part 1-->
<tbody>
<tr>
<td id = "col1">
<label> <span class = "spc7">Speaker A:</span>
<select name = "speakerA">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class = "spc7">Speaker B:</span>
<select name = "speakerB">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class = "spc7">Speaker C:</span>
<select name = "speakerC">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class = "spc7">Speaker D:</span>
<select name = "speakerD">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class = "spc7">Speaker E:</span>
<select name = "speakerE">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class = "spc7">Speaker F:</span>
<select name = "speakerF">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
</td>
<!-- Listening - Part 2-->
<td id = "col2">
<span class = "spc7"><u>Statement A</u>:</span>
<label>1) - True:
<input name = "statementA" type = "radio"
value = "1) - True" checked>
</label>
<label>2) - False:
<input name = "statementA" type = "radio"
value = "2) - False">
</label>
<label>3) - Not Stated:
<input name = "statementA" type = "radio"
value = "3) - Not Stated">
</label>
<p></p>
<span class = "spc7"><u>Statement B</u>:</span>
<label>1) - True:
<input name = "statementB" type = "radio"
value = "1) - True" checked>
</label>
<label>2) - False:
<input name = "statementB" type = "radio"
value = "2) - False">
</label>
<label>3) - Not Stated:
<input name = "statementB" type = "radio"
value = "3) - Not Stated">
</label>
<p></p>
<span class = "spc7"><u>Statement C</u>:</span>
<label>1) - True:
<input name = "statementC" type = "radio"
value = "1) - True" checked>
</label>
<label>2) - False:
<input name = "statementC" type = "radio"
value = "2) - False">
</label>
<label>3) - Not Stated:
<input name = "statementC" type = "radio"
value = "3) - Not Stated">
</label>
<p></p>
<span class = "spc7"><u>Statement D</u>:</span>
<label>1) - True:
<input name = "statementD" type = "radio"
value = "1) - True" checked>
</label>
<label>2) - False:
<input name = "statementD" type = "radio"
value = "2) - False">
</label>
<label>3) - Not Stated:
<input name = "statementD" type = "radio"
value = "3) - Not Stated">
</label>
<p></p>
<span class = "spc7"><u>Statement E</u>:</span>
<label>1) - True:
<input name = "statementE" type = "radio"
value = "1) - True" checked>
</label>
<label>2) - False:
<input name = "statementE" type = "radio"
value = "2) - False">
</label>
<label>3) - Not Stated:
<input name = "statementE" type = "radio"
value = "3) - Not Stated">
</label>
<p></p>
<span class = "spc7"><u>Statement F</u>:</span>
<label>1) - True:
<input name = "statementF" type = "radio"
value = "1) - True" checked>
</label>
<label>2) - False:
<input name = "statementF" type = "radio"
value = "2) - False">
</label>
<label>3) - Not Stated:
<input name = "statementF" type = "radio"
value = "3) - Not Stated">
</label>
<p></p>
<span class = "spc7"><u>Statement G</u>:</span>
<label>1) - True:
<input name = "statementG" type = "radio"
value = "1) - True" checked>
</label>
<label>2) - False:
<input name = "statementG" type = "radio"
value = "2) - False">
</label>
<label>3) - Not Stated:
<input name = "statementG" type = "radio"
value = "3) - Not Stated">
</label>
</td>
<!-- Listening - Part 3-->
<td id = "col3">
<span class = "spc7"><u>Question 3</u>:</span>
<label>1)
<input name = "question 3" type = "radio"
value = "1" checked>
</label>
<label>2)
<input name = "question 3" type = "radio"
value = "2">
</label>
<label>3)
<input name = "question 3" type = "radio"
value = "3">
</label>
<p></p>
<span class = "spc7"><u>Question 4</u>:</span>
<label>1)
<input name = "question 4" type = "radio"
value = "1" checked>
</label>
<label>2)
<input name = "question 4" type = "radio"
value = "2">
</label>
<label>3)
<input name = "question 4" type = "radio"
value = "3">
</label>
<p></p>
<span class = "spc7"><u>Question 5</u>:</span>
<label>1)
<input name = "question 5" type = "radio"
value = "1" checked>
</label>
<label>2)
<input name = "question 5" type = "radio"
value = "2">
</label>
<label>3)
<input name = "question 5" type = "radio"
value = "3">
</label>
<p></p>
<span class = "spc7"><u>Question 6</u>:</span>
<label>1)
<input name = "question 6" type = "radio"
value = "1" checked>
</label>
<label>2)
<input name = "question 6" type = "radio"
value = "2">
</label>
<label>3)
<input name = "question 6" type = "radio"
value = "3">
</label>
<p></p>
<span class = "spc7"><u>Question 7</u>:</span>
<label>1)
<input name = "question 7" type = "radio"
value = "1" checked>
</label>
<label>2)
<input name = "question 7" type = "radio"
value = "2">
</label>
<label>3)
<input name = "question 7" type = "radio"
value = "3">
</label>
<p></p>
<span class = "spc7"><u>Question 8</u>:</span>
<label>1)
<input name = "question 8" type = "radio"
value = "1" checked>
</label>
<label>2)
<input name = "question 8" type = "radio"
value = "2">
</label>
<label>3)
<input name = "question 8" type = "radio"
value = "3">
</label>
<p></p>
<span class = "spc7"><u>Question 9</u>:</span>
<label>1)
<input name = "question 9" type = "radio"
value = "1" checked>
</label>
<label>2)
<input name = "question 9" type = "radio"
value = "2">
</label>
<label>3)
<input name = "question 9" type = "radio"
value = "3">
</label>
</td>
</tr>
</tbody>
</table>
<br>
<input type = "button" value = "Create Listening GIFT">
</div>
答案 0 :(得分:2)
只需删除margin-left:auto;保证金右:自动;从表中统治。 在父div上应用这些css样式以及display:table。
div {
margin: auto;
display: table;
}
这将确保按钮始终保持在
的第一列的开头答案 1 :(得分:1)
用div包装你的代码并将其宽度设置为880px,因为我们已经知道表的宽度,并且设置为margin-left和right as auto
div{
margin-left:auto;
margin-right:auto;
width:900px;
}
table{
}
<div>
<table class="tablecenter">
<thead>
<tr>
<th style="height:80px">
<span class="tableheader">Listening - Part 1</span>
</th>
<th style="height:80px">
<span class="tableheader">Listening - Part 2</span>
</th>
<th style="height:80px">
<span class="tableheader">Listening - Part 3</span>
</th>
</tr>
</thead>
<!-- Listening - Part 1-->
<tbody>
<tr>
<td id="col1">
<label> <span class="spc7">Speaker A:</span>
<select name="speakerA">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class="spc7">Speaker B:</span>
<select name="speakerB">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class="spc7">Speaker C:</span>
<select name="speakerC">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class="spc7">Speaker D:</span>
<select name="speakerD">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class="spc7">Speaker E:</span>
<select name="speakerE">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class="spc7">Speaker F:</span>
<select name="speakerF">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
</td>
<!-- Listening - Part 2-->
<td id="col2">
<span class="spc7"><u>Statement A</u>:</span>
<label>1) - True:
<input name="statementA" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementA" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementA" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement B</u>:</span>
<label>1) - True:
<input name="statementB" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementB" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementB" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement C</u>:</span>
<label>1) - True:
<input name="statementC" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementC" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementC" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement D</u>:</span>
<label>1) - True:
<input name="statementD" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementD" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementD" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement E</u>:</span>
<label>1) - True:
<input name="statementE" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementE" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementE" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement F</u>:</span>
<label>1) - True:
<input name="statementF" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementF" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementF" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement G</u>:</span>
<label>1) - True:
<input name="statementG" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementG" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementG" type="radio" value="3) - Not Stated">
</label>
</td>
<!-- Listening - Part 3-->
<td id="col3">
<span class="spc7"><u>Question 3</u>:</span>
<label>1)
<input name="question 3" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 3" type="radio" value="2">
</label>
<label>3)
<input name="question 3" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 4</u>:</span>
<label>1)
<input name="question 4" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 4" type="radio" value="2">
</label>
<label>3)
<input name="question 4" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 5</u>:</span>
<label>1)
<input name="question 5" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 5" type="radio" value="2">
</label>
<label>3)
<input name="question 5" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 6</u>:</span>
<label>1)
<input name="question 6" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 6" type="radio" value="2">
</label>
<label>3)
<input name="question 6" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 7</u>:</span>
<label>1)
<input name="question 7" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 7" type="radio" value="2">
</label>
<label>3)
<input name="question 7" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 8</u>:</span>
<label>1)
<input name="question 8" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 8" type="radio" value="2">
</label>
<label>3)
<input name="question 8" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 9</u>:</span>
<label>1)
<input name="question 9" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 9" type="radio" value="2">
</label>
<label>3)
<input name="question 9" type="radio" value="3">
</label>
</td>
</tr>
</tbody>
</table>
<br>
<input type="button" value="Create Listening GIFT">
</div>
或
将其样式设置为display:flex并将方向设置为column,然后将content-content设置为center
检查此代码段
div {
display: flex;
flex-direction: column;
align-items: center;
}
input[ type="button"] {
flex: 0 1;
}
<div>
<table class="tablecenter">
<thead>
<tr>
<th style="height:80px">
<span class="tableheader">Listening - Part 1</span>
</th>
<th style="height:80px">
<span class="tableheader">Listening - Part 2</span>
</th>
<th style="height:80px">
<span class="tableheader">Listening - Part 3</span>
</th>
</tr>
</thead>
<!-- Listening - Part 1-->
<tbody>
<tr>
<td id="col1">
<label> <span class="spc7">Speaker A:</span>
<select name="speakerA">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class="spc7">Speaker B:</span>
<select name="speakerB">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class="spc7">Speaker C:</span>
<select name="speakerC">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class="spc7">Speaker D:</span>
<select name="speakerD">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class="spc7">Speaker E:</span>
<select name="speakerE">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
<p></p>
<label> <span class="spc7">Speaker F:</span>
<select name="speakerF">
<option>Statement 1</option>
<option>Statement 2</option>
<option>Statement 3</option>
<option>Statement 4</option>
<option>Statement 5</option>
<option>Statement 6</option>
<option>Statement 7</option>
</select>
</label>
</td>
<!-- Listening - Part 2-->
<td id="col2">
<span class="spc7"><u>Statement A</u>:</span>
<label>1) - True:
<input name="statementA" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementA" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementA" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement B</u>:</span>
<label>1) - True:
<input name="statementB" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementB" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementB" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement C</u>:</span>
<label>1) - True:
<input name="statementC" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementC" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementC" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement D</u>:</span>
<label>1) - True:
<input name="statementD" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementD" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementD" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement E</u>:</span>
<label>1) - True:
<input name="statementE" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementE" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementE" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement F</u>:</span>
<label>1) - True:
<input name="statementF" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementF" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementF" type="radio" value="3) - Not Stated">
</label>
<p></p>
<span class="spc7"><u>Statement G</u>:</span>
<label>1) - True:
<input name="statementG" type="radio" value="1) - True" checked>
</label>
<label>2) - False:
<input name="statementG" type="radio" value="2) - False">
</label>
<label>3) - Not Stated:
<input name="statementG" type="radio" value="3) - Not Stated">
</label>
</td>
<!-- Listening - Part 3-->
<td id="col3">
<span class="spc7"><u>Question 3</u>:</span>
<label>1)
<input name="question 3" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 3" type="radio" value="2">
</label>
<label>3)
<input name="question 3" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 4</u>:</span>
<label>1)
<input name="question 4" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 4" type="radio" value="2">
</label>
<label>3)
<input name="question 4" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 5</u>:</span>
<label>1)
<input name="question 5" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 5" type="radio" value="2">
</label>
<label>3)
<input name="question 5" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 6</u>:</span>
<label>1)
<input name="question 6" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 6" type="radio" value="2">
</label>
<label>3)
<input name="question 6" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 7</u>:</span>
<label>1)
<input name="question 7" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 7" type="radio" value="2">
</label>
<label>3)
<input name="question 7" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 8</u>:</span>
<label>1)
<input name="question 8" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 8" type="radio" value="2">
</label>
<label>3)
<input name="question 8" type="radio" value="3">
</label>
<p></p>
<span class="spc7"><u>Question 9</u>:</span>
<label>1)
<input name="question 9" type="radio" value="1" checked>
</label>
<label>2)
<input name="question 9" type="radio" value="2">
</label>
<label>3)
<input name="question 9" type="radio" value="3">
</label>
</td>
</tr>
</tbody>
</table>
<br>
<input type="button" value="Create Listening GIFT">
</div>
html css
希望这有帮助
答案 2 :(得分:1)
尝试将宽度百分比(98%)添加到类.tablecenter中,如下所示
.tablecenter { margin-left:auto; margin-right:auto;width:98% }
并使用具有相同类的div来扭曲按钮,或添加具有与上述相同属性的新类
<div class="tablecenter">
<input type = "button" value = "Create Listening GIFT">
</div>
答案 3 :(得分:1)
我采取了略微不同的方法。 我的css
.tablecenter {
margin-left: auto;
margin-right: auto;
border-bottom:none;
}
tbody td, thead th {
border:solid black thin
}
和桌子的底部......
</tbody>
<tfoot>
<tr>
<td colspan="3"><input type="button" value="Create Listening GIFT"></td>
</tr>
</tfoot>
</table>