Question

我在安置方面遇到了麻烦。我想最终将我的设置设为链接，但出于审美目的，我希望我的边框线从页面的左边缘开始，然后转到页面的整个宽度。相反，内容排在左边缘右侧约5-10px，当我的内容设置为100％宽度时，它使我的页面有一个水平滚动条。我希望它只是适合一页没有滚动条。任何帮助将不胜感激！

HTML：

<input id="searchbar" type="search" placeholder="search" />

<div id="search" class="accommodation">Accomodation<img class="arrowtwo" src="../images/arrow.png" alt="accommodation"/>
<
/div>

<div id="search" class="activities">Activities<img class="arrowtwo" src="../images/arrow.png" alt="activities"/>
</div>

<div id="search" class="facilities">Facilities<img class="arrowtwo" src="../images/arrow.png" alt="facilities"/>
</div>

<div id="search" class="food">Food<img class="arrowtwo" src="../images/arrow.png" alt="food"/>
</div>

<div id="search" class="health">Health<img class="arrowtwo" src="../images/arrow.png" alt="health"/>
</div>

<div id="search" class="services">Services<img class="arrowtwo" src="../images/arrow.png" alt="services"/>
</div>

<div id="search" class="sights">Sights<img class="arrowtwo" src="../images/arrow.png" alt="sights"/>
</div>

<div id="search" class="transportation">Transportation<img class="arrowtwo" src="../images/arrow.png" alt="transportation"/>
</div>

</body>

CSS：

body.search{background-color: rgb(84,163,188);
display:block;
width:100%;
}

img.arrowtwo{
width:40px;
height:7px;
margin-right: 10px;
float:right;
}

#search{
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: #000000;
border-collapse:collapse;
padding-top:10px;
padding-bottom:10px;
width:100%;
position:relative;
left:0px;

}

Answer 1

您正在获取滚动条，因为div现在宽度为100％加上填充。一个想法是将当前的html包装在另一个div中，并将其宽度设置为100％，然后在新div中添加填充：

<div class="wrapper">
  <input id="searchbar" type="search" placeholder="search" />
  // the rest of your form here ....
</div>

对齐页面左边缘的内容

1 个答案: