如何在內容周圍創建邊框

我希望<div class="ghassar">能夠在我的內容周圍創建邊框，但是當我嘗試使邊框內的所有內容都消失時，我如何在內容周圍創建邊框而不會使其消失。我認爲，當我創建一個邊界，它隱藏其背後的內容，是否有任何方法來解決這個問題，以及如何使內容之間的空間不使用標籤<br> 和div標籤我應該使用類或ID如何在內容周圍創建邊框

HTML

<div class="ghassar"> 
    <div id="op"> 
     <label>Number of days</label> 
     <select name="days"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
     </select> 
     <br><br><br><br> 
    </div> 
    <div> 
     <input type="submit" value="Add to the basket" name="rent" id="buttom1" /> 
    </div> 
    <br><br><br><br> 
<div>

CSS

.ghassar { 
    margin-left: 600px; 
    border: 2px solid; 
    padding: 10px 40px; 
    width: 300px; 
    border-radius: 25px; 
}

Demo

來源

2014-01-16 Arif Muni

上面的代碼相當混亂。請創建一個小提琴，以便我們可以清楚地看到您正在嘗試做什麼以獲得幫助。 –

它雖然適合我。 – user2989408

你的邊框可以正常工作，但你有一個600像素的「margin-left」;它被推出屏幕的可能性更大。 – Daedalus

.ghassar{ 
    width:300px; 
    margin-left: 600px; 
    padding:10px 40px; 
    border:solid 1px #CCC; 
    border-radius:25px; 
}

儘量使你的代碼整潔，請。

您忘記了爲您的邊界屬性添加顏色。

來源

2014-01-17 00:02:03 Night

從來沒有說過它更好？只是建議保持整潔。 – Night

您在CSS邊框屬性中缺少顏色。嘗試將其更改爲

border: 2px solid black;

而且只是一個提示 - 請讓你的縮進更具可讀性。您應該比父元素進一步縮進嵌套的子元素。

Here's the corrected fiddle和result通過的jsfiddle

來源

2014-01-17 00:05:59 saibur

我清理的HTML一點，邊境工作正常jsFiddle：

<div class="ghassar"> 
    <div id="op"> 
     <label>Number of days</label> 
     <select name="days"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
     </select> 
    </div> 
    <div id="add-to-basket"> 
     <input type="submit" value="Add to the basket" name="rent" id="buttom1" /> 
    </div> 
</div>

以及如何才能讓內容之間的空間，而不使用標籤<br>

您可以使用空間，像我一樣在這裏：

#add-to-basket { margin: 50px auto; position: relative; }

和div標籤應我使用class和id

這取決於你在做什麼。頁面上的元素不能共享相同的ID，但多個元素可以具有相同的類。

更新：正如在其他的答案中提到，您還應該設置邊框的顏色，如果你不想要的默認。你可以做，要麼用速記方式：

border:2px solid #f00; /* #f00 is the color red*/

或

border-color: #f00

來源

2014-01-17 00:09:42 Sadiq

添加顏色的邊框。沒有它，沒有邊界可見。

border: 2px solid #FF0000;

來源

2014-01-17 00:11:04 datelligence

如何在內容周圍創建邊框

回答

相關問題