如何在css

Question

所有

我已经创建了导航菜单栏，

这是我的JSFIDDLE

我需要为每个列表添加右侧栏，例如THIS

我刚为每个列表添加了垂直线，

    <a href="" style="text-decoration:none;"><span style="color: #ffffff;
 padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
 inherit; text-decoration: inherit;" class=""> Share</span></a> |
    <a href="" style="text-decoration:none;"><span style="color: #ffffff;
 padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
 inherit; text-decoration: inherit;" class=""> Join</span></a> |
   <a href="" style="text-decoration:none;"><span style="color: #ffffff;
 padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
 inherit; text-decoration: inherit;" class=""> See Safety Tips</span></a> |
   <a href="" style="text-decoration:none;"><span style="color: #ffffff; 
padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
 inherit; text-decoration: inherit;" class=""> Settings</span></a>

我可以知道，任何其他方法来增加右侧边栏的高度和设置颜色。

任何帮助都将受到高度赞赏。

谢谢，

注意：我需要这样做，我的html没有任何变化。

Answer 1

使用[Macro <ReportData.MessageText> returned 33612 characters which is more than the maximum allowable by Excel (32767). Cell Content has been truncated to 32767 characters.] 是一个好主意。

＆＃13;

＆＃13;

pseudo elements

＆＃13;

/* my version */
.nav {
  background: #007EA8;
  padding: 20px;
  font: normal 16px/20px arial;
  margin: 0 0 15px;
  list-style: none;
}
.nav-item {
  display: inline-block;
  margin-right: 40px;
}
.nav-item:not(:first-child)::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 30px;
  background: #fff;
  margin: -5px 0 0 -21px;
}
.nav-link {
  color: #fff;
  text-decoration: none;
}

/* your version */
.menu-item {
  text-decoration: none;
}
.menu-item:not(:first-child)::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 30px;
  background: #fff;
  margin: -5px 0 0 -11px;
}
.menu-item span {
  color: #fff;
  padding-right: 20px;
  font-size: 17px;
}

＆＃13;

＆＃13;

＆＃13;

我也修改了你的代码

Answer 2

您可以将侧边栏包装在单独的内联元素中，例如

<span class="sideBar">|</span>

并相应地设定该类的风格。

Answer 3

您可以使用pseudo元素来执行此操作

a span:after{
    content:"|";
    font-size:30px;
    color:white;
    margin-left:10px;
}
a:nth-child(4) span:after{
    content:"";
}

              <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 13px;">
                                            <tr id="layout-row88" class="layout layout-row widget _widget_text style88" style="margin: 0; padding: 0; background-color: #007EA8;">
                                              <td id="layout-row-padding88" valign="top" style="padding: 42px 0px;">
                                                <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 13px;">
                                                  <tr>
                                                    <td id="text_div72" class="td_text td_block" valign="top" align="left" width="285" style="color: inherit; font-size: inherit; font-weight: inherit; line-height: 1; text-decoration: inherit; font-family: Arial;">
                                                      <a href="" style="text-decoration:none;"><span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> Share</span></a> 
                                                       <a href="" style="text-decoration:none;"><span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> Join</span></a> 
													    <a href="" style="text-decoration:none;"><span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> See Safety Tips</span></a> 
													    <a href="" style="text-decoration:none;"><span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> Settings</span></a>
													  
													  <div style="margin: 0; outline: none; padding: 0; text-align: right;">
													  <a href="%WEBCOPY%" class="" target="_blank" style="margin: 0; outline: none; padding: 0; color: #333333;">
													  </a><br></div>
                                                    </td>
                                                  </tr>
                                                </table>
                                              </td>
                                            </tr>
                                          </table>

Answer 4

以下是如何显示菜单的代码我已将您的html更改为UL li。

DEMO Link http://jsfiddle.net/patelmit69/5nu67uwv/1/ HTML

<ul>
    <li> <a href=''>Share</a></li>
    <li> <a href=''>Join</a></li>
    <li> <a href=''>See Safety Tips</a></li>
    <li> <a href=''>Settings</a></li>

CSS

ul {
    list-style:none;
    padding:10px;
    background:blue;
}
ul li {
    display:inline-block;
}
ul li a {
    color:#fff;
    text-decoration:none;
    display:block;
    padding:3px 10px;
    border-left:1px solid #fff;
}
ul li:first-child a {
    border-left:0px;
}