Question

考虑这个HTML：

＆＃13;

<li role="presentation"><a href="index.php">Home </a></li>
<li role="presentation"><a href="about.php">About Us</a></li>
<li role="presentation"><a href="contact.php">Contact Us</a></li>
<li role="presentation"><a href="gallery.php">Gallery</a></li>

＆＃13;

我想知道如何在浅蓝色或蓝色的每个按钮周围添加边框。

Answer 1

您可以向a元素添加边框，并使用填充使其远离单词。将li元素显示为内联块将使它们保持在同一行。由于我在a元素上添加了边框，这意味着边框内的整个区域都是可点击的。

＆＃13;

a{
  border:2px solid lightblue;
  padding:10px 20px;
  text-decoration:none;
}
li{
  display:inline-block;
}

＆＃13;

<li role="presentation"><a href="index.php">Home </a></li>
        <li role="presentation"><a href="about.php">About Us</a></li>
        <li role="presentation"><a href="contact.php">Contact Us</a></li>
        <li role="presentation"><a href="gallery.php">Gallery</a></li>

＆＃13;

Answer 2

这很简单，只需添加以下规则：

a {
  border: 1px blue solid;
}

这是片段：

a {
  border: 1px blue solid;
}

<ul>
   <li role="presentation"><a href="index.php">Home </a></li>
   <li role="presentation"><a href="about.php">About Us</a></li>
   <li role="presentation"><a href="contact.php">Contact Us</a></li>
   <li role="presentation"><a href="gallery.php">Gallery</a></li>
</ul>

Answer 3

罗布，

您应该可以在CSS中添加以下代码。

＆＃13;

ul li {
  border-bottom:1px solid blue;
}

li {
  display:inline-block;
}

＆＃13;

<ul>
  <li>Border</li>
  <li>Bottom</li>
  <li>Blue</li>
</ul>

＆＃13;

您可以更改边框属性。即

＆＃13;

ul li {
  border-bottom: 5px solid green;
}

li {
  display:inline-block;
}

＆＃13;

<ul>
  <li>Border</li>
  <li>Bottom</li>
  <li>Green</li>
</ul>

＆＃13;

等

您可以进行其他样式更改，但您的问题是＆＃34; border-bottom＆＃34;属性可能是您正在寻找的。

希望这有帮助。

Answer 4

在此处参考此指南https://www.w3schools.com/css/css_border.asp

为所有按钮添加一个类，并为其添加边框属性。

在你的html文件中

<a href="index.php" class="border">

在你的样式文件中（或标题中的样式）

.border{border: 2px solid #0000FF;}

您也可以内联这样做，但请前往w3schools了解

Answer 5

我做了一个可能有帮助的小提琴：THIS

HTML

li {
  display: inline-block;   # necessary to format links/buttons correctly
  margin: 10px 0;
}

li a {
  border: 1px solid blue;  # adds blue border around link/button
  padding: 10px;           # gives some room between text and border
  text-decoration: none;   # removes underlined link if you prefer
}

CSS

border: 1px solid blue;

对于边框颜色，请查看许多颜色选择器工具之一，例如http://www.etalabs.net/compare_libcs.html，并使边框呈现您想要的任何蓝色阴影。只需改变：

border: 1px solid #88EBFB;

说，

DESCRIPTION = "Minimal console image."
IMAGE_INSTALL= "\
base-files \
base-passwd \
busybox \
sysvinit \
initscripts \
${ROOTFS_PKGMANAGE_BOOTSTRAP} \
${CORE_IMAGE_EXTRA_INSTALL} \
"
IMAGE_LINGUAS = " "
LICENSE = "MIT"
inherit core-image
IMAGE_ROOTFS_SIZE ?= "8192"

Answer 6

你可以通过几种方式来做到这一点。第一个是ul或者ol属于一个类名，如

<ul class = "name">
   <li role="presentation"><a href="index.php">Home </a></li>
   <li role="presentation"><a href="about.php">About Us</a></li>
   <li role="presentation"><a href="contact.php">Contact Us</a></li>
   <li role="presentation"><a href="gallery.php">Gallery</a></li>
</ul>

如何在导航标签周围添加边框？

6 个答案: