HTML / CSS上的额外像素

Question

我想将文字放在网页的某个部分，但是当我将left: 0px;更改为left: 130px;时，会创建导致水平条显示的像素。关于如何解决这个问题的任何想法？

CSS

.main4{
text-align: left;
left: 0px;
line-height: 70px;
margin-top: -30px;
position: absolute;
top: 8px;
width: 98.7%;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
margin-bottom: 0px;
display: block;
}

HTML

<div class="main4">
<h1>Upon Doctor's advice</h1>
<h1>Upon advice by family, friends, relatives, another previous patient</h1>
<h1>Recommended by hospital employee</h1>
<h1>Employee's hospital privilege</h1>
<h1>Reputation as the center of best doctors</h1>
<h1>Recommended for good nursing care</h1>
<h1>Others (Please specify): </h1>
</div>

left: 130px;

left: 0px;

Answer 1

水平条是由超出其父级宽度的内容引起的。在这里，您已将.main4 130px向右移动，这会将其推到其父级的宽度之外。您需要（a）可能使用填充，而不是绝对位置，或（b）减少.main4的宽度，直到不发生这种情况。

Answer 2

只需删除width: 98.7%;

.main4{
text-align: left;
left: 130px;
line-height: 70px;
margin-top: -30px;
position: absolute;
top: 8px;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
margin-bottom: 0px;
display: block;
}

<div class="main4">
<h1>Upon Doctor's advice</h1>
<h1>Upon advice by family, friends, relatives, another previous patient</h1>
<h1>Recommended by hospital employee</h1>
<h1>Employee's hospital privilege</h1>
<h1>Reputation as the center of best doctors</h1>
<h1>Recommended for good nursing care</h1>
<h1>Others (Please specify): </h1>
</div>