Question

我需要制作一个导航栏，带有符号＆＃34; | ＆＃34;每个链接之间。我尝试使用

.navbar li::after { position:absolute; content:" | "; }

但我总是在链接下面得到第一个符号，我不知道为什么。

http://prntscr.com/c34zrf

我也尝试过使用border-right和border-left，但是看起来非常难看，并为每个元素提供了2行。

http://prntscr.com/c350gw

Answer 1

这里是我通常如何在你的边界解决方案上进行构建：fiddle

<强> HTML：

我包含一个跨度来应用边框，因为它意味着边框将保持文本的高度。如果要向列表中添加填充，请将水平填充应用于li，将垂直填充应用于跨度。

ul{

  padding:0px;
  margin:0px;

}

li {

  list-style:none;
  display:inline-block;
  padding:10px 0px;

}

span {

  padding:0px 10px;
  border-left:1px solid red;
  display:inline-block;

}

li:first-child span {

  border-left:none;  

}

您可以使用：first-child删除应该一直有效的边框IE8

<强> CSS：

 public void createTables() throws SQLException {

    Statement statement = getConnection().createStatement();
    System.out.println("Checking database for table");
    DatabaseMetaData databaseMetadata = getConnection().getMetaData();
    ResultSet resultSet = databaseMetadata.getTables(null, null, "PATIENT", null);
    if (resultSet.next()) {
       System.out.println("TABLE ALREADY EXISTS");
    } else {
        //language=MySQL
        statement.execute("CREATE TABLE Patient (" +
                "CardNumber CHAR(10) NOT NULL PRIMARY KEY, " +
                " FirstName CHAR(50)," +
                " MiddleName CHAR(50)," +
                " LastName CHAR(50) )");
    }
}

Answer 2

我完全同意克里斯托弗托马斯＆＃39;方法，它实际上非常聪明。我想到了另一种可能的方法。

将链接放在三个单独的段落中，并制作两个div，即行。然后你仍然可以单独格式化它们看起来像线条。

线条没有完美地垂直输入，但它是我在五分钟内能做的最好的。

＆＃13;

        <body>
            <p>Link 1</p>
            <div></div>
            <p>Link 2</p>
            <div></div>
            <p>Link 3</p>
        </body>

＆＃13;

{{1}}

＆＃13;

在CSS

2 个答案: