Question

我希望<div class="ghassar">在我的内容周围创建边框，但是当我尝试使边框所有内容消失时，如何在内容周围创建边框而不会让它们消失。我想当我创建一个边框时，它隐藏了它背后的内容，有没有办法解决这个问题，如何在不使用标签<br>的情况下在内容之间留出空间对于div标签，我应该使用class或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

Answer 1

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

请尽量保持代码更整洁。

您忘了为边框属性添加颜色。

Answer 2

我清理了一下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

Answer 3

您的CSS边框属性上缺少颜色。尝试将其更改为

border: 2px solid black;

也只是提示 - 请让您的缩进更具可读性。您应该嵌套子元素而不是父元素。

Here's the corrected fiddle和result来自jsfiddle

Answer 4

为边框添加颜色。没有它，没有边界可见。

border: 2px solid #FF0000;

如何围绕内容制作边框

4 个答案: