在Bootstrap 4的列表项之间添加一些空间和边框

时间：2019-08-01 10:59:32

标签： html css bootstrap-4

在标题中，我有一些链接，我想在它们之间添加一些空间和边框。

我尝试使用:: before伪代码添加内容，但是没有将内容放到我想要的位置。

.header_links_ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header_links_ul li a {
  color: #000;
  font-size: 12px;
  display: block;
}

@media (min-width:992px) {
  .header_links_ul li+li::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 8px;
    margin-top: -4px;
    background: #ff0000;
    content: '';
  }
}
<div class="row">
  <div class="col-md-6">
    <ul class="header_links_ul header_links_ul_left d-flex justify-content-center justify-content-md-start">
      <li><a href="#">Vásárlási információk</a></li>
      <li><a href="#">Szállítás</a></li>
      <li><a href="#">Kapcsolat</a></li>
    </ul>
  </div>
  <div class="col-md-6">
    <ul class="header_links_ul header_links_ul_right d-flex justify-content-center justify-content-md-end">
      <li><a href="#">Regisztráció</a></li>
      <li><a href="#">Bejelentkezés</a></li>
    </ul>
  </div>
  <div class="clearfix"></div>
</div>

我现在得到的结果以及我想要的结果，会在照片上显示出来。 Photo, click here

5 个答案:

答案 0 :(得分：0)

您需要添加相对于li标签的position：相对，外加一些填充/边距以正确隔开它们。 试试这个：

.header_links_ul li+li {
 position: relative;
 padding-left: 20px;
 margin-left: 20px;
}

:: before伪元素的位置是绝对的，因此您指定的'的上下值将相对于具有相对（或绝对）位置的下一个父元素。如果没有这样的父级，它将默认一直返回到元素本身，这意味着它将相对于页面本身放置。'（在您的情况下就是这样）。

引文/进一步阅读： https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

答案 1 :(得分：0)

您可以使用以下代码。附加了LINK 

| ERROR: oe_runmake failed
| ../../elfutils-0.166/libdwfl/dwfl_report_elf.c: In function ‘__libdwfl_elf_address_range’:
| ../../elfutils-0.166/libdwfl/dwfl_report_elf.c:172:19: error: this statement may fall through [-Werror=implicit-fallthrough=]
|        add_p_vaddr = true;
|                    ^
| ../../elfutils-0.166/libdwfl/dwfl_report_elf.c:174:5: note: here
|      case ET_DYN:
|      ^~~~
| gcc  -D_GNU_SOURCE -DHAVE_CONFIG_H -DLOCALEDIR='"/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/share/locale"' -I. -I../../elfutils-0.166/libdwfl -I..  -I. -I../../elfutils-0.166/libdwfl -I../../elfutils-0.166/lib -I.. -I../../elfutils-0.166/libdwfl -I../../elfutils-0.166/libdwfl/../libelf -I../../elfutils-0.166/libdwfl/../libebl -I../../elfutils-0.166/libdwfl/../libdw -I../../elfutils-0.166/libdwfl/../libdwelf -isystem/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/include -std=gnu99 -Wall -Wshadow -Wformat=2 -Wold-style-definition -Wstrict-prototypes -Wlogical-op -Wduplicated-cond -Wnull-dereference -Werror -Wunused -Wextra -Wstack-usage=262144  -isystem/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/include -O2 -pipe -c -o derelocate.o ../../elfutils-0.166/libdwfl/derelocate.c
| gcc  -D_GNU_SOURCE -DHAVE_CONFIG_H -DLOCALEDIR='"/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/share/locale"' -I. -I../../elfutils-0.166/libdwfl -I..  -I. -I../../elfutils-0.166/libdwfl -I../../elfutils-0.166/lib -I.. -I../../elfutils-0.166/libdwfl -I../../elfutils-0.166/libdwfl/../libelf -I../../elfutils-0.166/libdwfl/../libebl -I../../elfutils-0.166/libdwfl/../libdw -I../../elfutils-0.166/libdwfl/../libdwelf -isystem/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/include -std=gnu99 -Wall -Wshadow -Wformat=2 -Wold-style-definition -Wstrict-prototypes -Wlogical-op -Wduplicated-cond -Wnull-dereference -Werror -Wunused -Wextra -Wstack-usage=262144  -isystem/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/include -O2 -pipe -c -o offline.o ../../elfutils-0.166/libdwfl/offline.c
| gcc  -D_GNU_SOURCE -DHAVE_CONFIG_H -DLOCALEDIR='"/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/share/locale"' -I. -I../../elfutils-0.166/libdwfl -I..  -I. -I../../elfutils-0.166/libdwfl -I../../elfutils-0.166/lib -I.. -I../../elfutils-0.166/libdwfl -I../../elfutils-0.166/libdwfl/../libelf -I../../elfutils-0.166/libdwfl/../libebl -I../../elfutils-0.166/libdwfl/../libdw -I../../elfutils-0.166/libdwfl/../libdwelf -isystem/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/include -std=gnu99 -Wall -Wshadow -Wformat=2 -Wold-style-definition -Wstrict-prototypes -Wlogical-op -Wduplicated-cond -Wnull-dereference -Werror -Wunused -Wextra -Wstack-usage=262144  -isystem/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/include -O2 -pipe -c -o segment.o ../../elfutils-0.166/libdwfl/segment.c
| gcc  -D_GNU_SOURCE -DHAVE_CONFIG_H -DLOCALEDIR='"/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/share/locale"' -I. -I../../elfutils-0.166/libdwfl -I..  -I. -I../../elfutils-0.166/libdwfl -I../../elfutils-0.166/lib -I.. -I../../elfutils-0.166/libdwfl -I../../elfutils-0.166/libdwfl/../libelf -I../../elfutils-0.166/libdwfl/../libebl -I../../elfutils-0.166/libdwfl/../libdw -I../../elfutils-0.166/libdwfl/../libdwelf -isystem/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/include -std=gnu99 -Wall -Wshadow -Wformat=2 -Wold-style-definition -Wstrict-prototypes -Wlogical-op -Wduplicated-cond -Wnull-dereference -Werror -Wunused -Wextra -Wstack-usage=262144  -isystem/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/include -O2 -pipe -c -o dwfl_module_info.o ../../elfutils-0.166/libdwfl/dwfl_module_info.c
| gcc  -D_GNU_SOURCE -DHAVE_CONFIG_H -DLOCALEDIR='"/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/share/locale"' -I. -I../../elfutils-0.166/libdwfl -I..  -I. -I../../elfutils-0.166/libdwfl -I../../elfutils-0.166/lib -I.. -I../../elfutils-0.166/libdwfl -I../../elfutils-0.166/libdwfl/../libelf -I../../elfutils-0.166/libdwfl/../libebl -I../../elfutils-0.166/libdwfl/../libdw -I../../elfutils-0.166/libdwfl/../libdwelf -isystem/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/include -std=gnu99 -Wall -Wshadow -Wformat=2 -Wold-style-definition -Wstrict-prototypes -Wlogical-op -Wduplicated-cond -Wnull-dereference -Werror -Wunused -Wextra -Wstack-usage=262144  -isystem/data/vamshi/yocto/build/tmp/sysroots/x86_64-linux/usr/include -O2 -pipe -c -o dwfl_getmodules.o ../../elfutils-0.166/libdwfl/dwfl_getmodules.c
| cc1: all warnings being treated as errors
| Makefile:584: recipe for target 'dwfl_report_elf.o' failed
| make[2]: *** [dwfl_report_elf.o] Error 1
| make[2]: *** Waiting for unfinished jobs....
| Makefile:479: recipe for target 'all-recursive' failed
| make[1]: *** [all-recursive] Error 1
| Makefile:395: recipe for target 'all' failed
| make: *** [all] Error 2
| WARNING: /data/vamshi/yocto/build/tmp/work/x86_64-linux/elfutils-native/0.166-r0/temp/run.do_compile.107012:1 exit 1 from 'exit 1'
| ERROR: Function failed: do_compile (log file is located at /data/vamshi/yocto/build/tmp/work/x86_64-linux/elfutils-native/0.166-r0/temp/log.do_compile.107012)
ERROR: Task (virtual:native:/data/vamshi/yocto/oss/genivi-12/poky/meta/recipes-devtools/elfutils/elfutils_0.166.bb:do_compile) failed with exit code '1'
NOTE: Tasks Summary: Attempted 263 tasks of which 0 didn't need to be rerun and 1 failed.

Summary: 1 task failed:
  virtual:native:/data/vamshi/yocto/oss/genivi-12/poky/meta/recipes-devtools/elfutils/elfutils_0.166.bb:do_compile
Summary: There were 8 WARNING messages shown.
Summary: There were 2 ERROR messages shown, returning a non-zero exit code.

答案 2 :(得分：0)

您好，@ max777在您的代码下面添加CSS，这将对您有所帮助。

<style>
  header_links_ul li
  { border-right: 1px solid green;  margin-left: 2%;}
</style>

答案 3 :(得分：0)

这是创建标头的错误方法！

使用引导导航栏通过以下链接：

https://getbootstrap.com/docs/4.0/components/navbar/ https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

然后像这样在position:relative上使用li 

.header_links_ul li {
  position: relative;
 }

如果您需要更多帮助，请张贴代码笔或小提琴。

答案 4 :(得分：0)

.header_links_ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header_links_ul li a {
  color: #000;
  font-size: 12px;
  display: block;
}
.header_links_ul li{
line-height:15px
}

@media (min-width:992px) {
  .header_links_ul li+li::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 8px;
    margin-top: -4px;
    background: #ff0000;
    content: '';
  }
}
<div class="row">
  <div class="col-md-6">
    <ul class="header_links_ul header_links_ul_left d-flex justify-content-center justify-content-md-start">
      <li><a href="#">Vásárlási információk</a></li>
      <li><a href="#">Szállítás</a></li>
      <li><a href="#">Kapcsolat</a></li>
    </ul>
  </div>
  <div class="col-md-6">
    <ul class="header_links_ul header_links_ul_right d-flex justify-content-center justify-content-md-end">
      <li><a href="#">Regisztráció</a></li>
      <li><a href="#">Bejelentkezés</a></li>
    </ul>
  </div>
  <div class="clearfix"></div>
</div>

相关问题
最新问题