html – 只对div的一半进行边框处理

概述我的导航栏里面有一个div,我有我的标识.这个div优于导航栏并显示在包装器中.我将添加一个图像来向您显示我的意思： 所以,左边的图像是我的标识. 你可以看到,导航有一个border-bottom属性,显示一条很小的红线,所以我想要的是在徽标div中也显示边框,但仅限于将导航器与包装器分开的部分(正常蓝色,深蓝色). 这是我的代码： HTML <nav> <a href="index.ph 我的导航栏里面有一个div,我有我的标识.这个div优于导航栏并显示在包装器中.我将添加一个图像来向您显示我的意思：

所以,左边的图像是我的标识.
你可以看到,导航有一个border-bottom属性,显示一条很小的红线,所以我想要的是在徽标div中也显示边框,但仅限于将导航器与包装器分开的部分(正常蓝色,深蓝色).
这是我的代码：

HTML

<nav>    <a href="index.PHP"><img src="resources/img/logo.png" ID="logo"></a>    <ul>        <li><a href="portfolio.PHP">Portfolio</a></li>    </ul></nav>

CSS

nav {    wIDth: 100%;    text-align: center;    padding: 0;    margin: 0;    background-color: #38434d;    height: 99%;    border-bottom: 1px solID darkred;    clear: both;}#logo {    max-wIDth: 7%;    background: #38434d;    float: left;    padding: .2em;    margin: .1em 0 0 3em;}

那么,我该怎么做只显示我的logo div的底部边框？
谢谢！

解决方法 一种方法是对< a>进行样式化. element,而不是包含的< img>,并使用我们可以设置样式的伪元素：

nav {  wIDth: 100%;  text-align: center;  padding: 0;  margin: 0;  background-color: #38434d;  height: 99%;  border-bottom: 1px solID darkred;  clear: both;}/* keePing the same styling,with the addition of the position   in order to position the pseudo-element */nav > a {  max-wIDth: 7%;  background: #38434d;  float: left;  padding: .2em;  margin: .1em 0 0 3em;  position: relative;}nav > a img {  wIDth: 30px;  height: 60px;}nav > a::after {  content: '';  position: absolute;  bottom: 0;  left: 0;  right: 0;  height: 50%;  /* styling the border of the pseudo-element the same as the nav element: */  border: 1px solID darkred;  /* 'removing' the top-border */  border-top-wIDth: 0;

<nav>  <a href="index.PHP">    <img src="resources/img/logo.png" ID="logo">  </a>  <ul>    <li><a href="portfolio.PHP">Portfolio</a>    </li>  </ul></nav>

总结

以上是内存溢出为你收集整理的html – 只对div的一半进行边框处理全部内容，希望文章能够帮你解决html – 只对div的一半进行边框处理所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。