根据链接文字换行按钮？

Question

我正在尝试添加按钮，但我无法获得我正在寻找的结果。

以下图片是我想要做但无法复制的图片：

我得到的结果如下：

更新：我的问题是添加更多正在使用的css代码。

谢谢大家的帮助。

  

 .img-banner{
	margin-left:auto;
	margin-right:auto;
	display:inline;
}

body{
	position:relative;
	background-color:white;
	margin: 0;
	padding: 0;
}

ul{
	list-style:none;
}

a{	
	color: white;
	text-decoration: none;
	font-family: Sherwood !important;
}

.navbar-buttons{
	padding-top:20px;
	padding-right:20px;
	text-align:right;
	list-style:none;
	margin:0 auto;
	overflow:hidden;
	<!---background-image: url(./img/Banner.jpg);--->
	width:100%;
}

#wrapper {
	width: 940px;
	height:100%;
	margin: 0 auto;
 }

 #banner-wrapper{
	display:block;
	padding:0;
	margin-left:auto;
	margin-right:auto;
	background:#FFF;
	background-image: url(./img/Banner.jpg);
	height:14.6%;
	padding-bottom:44px;
}

img.no-border{border: 0;}

.img-banner{
	margin-left:auto;
	margin-right:auto;
	display:block;
}

#sidebarleft{
	width: 30%;
	padding-top: 58px;
	padding-right: 20px;
	display:inline;
	float:left;
}

#sidebarleft ul.menu{
	list-style:none;
	padding:0;
	margin:10px 0 10px 15px;
}

.leftbuttons{
	background-image: url(./img/Button_1.jpg);
	background-repeat:no-repeat;
	padding:20px 20px;
}

.leftbuttons a{
	color:grey;
	vertical-align:center;
}

.aligntext{
	vertical-align:center;
	text-align:left;
}

#sidebarright{
	float:right;
	width: 30%;
	padding: 0; marign:0;
	padding-top: 20px;
}

img.buttonUlti{
	float:right;
	padding-top:20px;
	padding-bottom:15px;
	border-radius:18px;
}

.shiftRes{
	margin-left:27px;
	padding-top:40px;
}

<div id="wrapper">
				
	<!-- banner-wrap starts here -->
	<div id="banner-wrapper">										
				<!-- Menu Tabs -->
		
			<ul>
				<li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Resources.cfm"><span>Support</span></a></li>
				
			</ul>
	</div>

    <div id="sidebarleft">
      <h2>Departments</h2>
      <ul class="menu">
        <li class="leftbuttons"><a class="aligntext" href="Blah.cfm">BLAH</a>
        </li>
        <li class="leftbuttons"><a href="Blah.cfm?">BLAH</a>
        </li>
        <li class="leftbuttons"><a href="Blah.cfm">BLAH</a>
        </li>
        <li class="leftbuttons"><a href="Blah.cfm">Room</a>
        </li>
      </ul>
    </div>
</div>

Answer 1

任何简单的方法都是使用和无序列表。

HTML

 <div class="container">
   <ul>
     <li>Claims</li>
     <li>Credentialing</li>
     <li>Customer Service</li>
     <li>Data Management</li>
     <li>Decision Support</li>
     <li>DNA Comittee</li>
   </ul>
 </div>

 CSS

 ul { list-style: none; }
 li { border: 1px solid black; width: 150px; padding: 5px;}

https://jsfiddle.net/8dn3q303/