對齊頁面左側邊緣的內容

我遇到安置問題。我想最終將我的設置設置爲鏈接，但出於美學目的，我希望我的邊框線從頁面的左邊緣開始，然後轉到整個頁面寬度。相反，內容在左邊緣右側約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; 

}

來源

2016-06-11 Michael Voulgaris

從HTML代碼中，我看不到任何一流的呼叫搜索。 – Kason

另外，您有多個具有相同名稱的ID。 ID本質上被認爲是獨一無二的。您可以將類名與ID號 –

交換非常感謝！ –

你所得到的滾動條，因爲在div現在將100％加襯墊的寬度。一個想法是包裝內部的div內當前的HTML和設置它的寬度是100％，然後添加填充，以形成新的DIV中：

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

來源

2016-06-11 01:22:28

謝謝，這幫助了很多！ –

對齊頁面左側邊緣的內容

回答

相關問題