如何使按钮的左边距始终等于左边距？
大家好，
我正在使用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>
4 个答案:
答案 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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？