HTML / CSS上的額外像素

Question

我想將文本放置在網頁的某個部分，但是當我left: 0px;更改時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向右移動.main4 ，這會將其推到其父級的寬度之外。 您需要（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>