Question

当我在文本右侧放置边框时，边框始终位于页面的右侧，而不是文本的右侧。我删除了浏览器的默认边框属性，结果仍然相同。

在代码笔上，第三个结果是我想要的，但右边是边框。

代码：

<div class = "logo">
The Three Words
</div>
<br>
<br>
<br>
<br>
<div class = "ideal-logo">
  The 
  <br>
  Three
  <br>
  Words
</div>

<div class = "ideal-left">
    The 
  <br>
  Three
  <br>
  Words
</div>

.logo {
  border-right: 10px solid black;
}

.ideal-logo {
  border-right: 5px solid black;
}

.ideal-left {
  border-left: 5px solid black;
}

Answer 1

<div>是block，默认情况下会跨越页面的整个宽度。因此，每个<div> 的右边缘是屏幕的右侧，其余的是空白空间。

使用display: inline-block;会使<div>收缩包围其内容。（这也允许它与文本和其他元素位于同一行，因此如果您仍然需要整体块，则可能需要额外的包装。）

Answer 2

在display: inline-block;上使用.logo＆amp; .ideal-logo。目前，它们是block元素，这就是它们端到端流动的原因。

这是片段，看看：

.logo {
  display: inline-block;
  border-right: 10px solid black;
}

.ideal-logo {
  display: inline-block;
  border-right: 5px solid black;
}

.ideal-left {
  border-left: 5px solid black;
}

<div class = "logo">
The Three Words
</div>
<br>
<br>
<br>
<br>
<div class = "ideal-logo">
  The 
  <br>
  Three
  <br>
  Words
</div>

<div class = "ideal-left">
    The 
  <br>
  Three
  <br>
  Words
</div>

希望这有帮助！

Answer 3

这是因为你实际上在<div>上应用了边框而div是一个块元素，你可以尝试将边框设置为段落`

并且它将起作用

html

<div class = "logo">
<p>The Three Words</p>
</div>

<强> CSS

p
   {
    border:10px dashed #000;
   }

您还可以做的是将宽度设置为div并在其周围设置边框，但这完全是 - 高效

Answer 4

使用display: inline-block。 pen

.logo {
  border-right: 10px solid black;
  display: inline-block
}

.ideal-logo {
  border-right: 5px solid black;
  display: inline-block;

}

.ideal-left {
  border-left: 5px solid black;
}

<div class = "logo">
The Three Words
</div>
<br>
<br>
<br>
<br>
<div class = "ideal-logo">
  The 
  <br>
  Three
  <br>
  Words
</div>

<div class = "ideal-left">
    The 
  <br>
  Three
  <br>
  Words
</div>

Border Right设置在页面的反面

4 个答案: