如何在侧边栏中对齐锚链接和列表？
body {
margin: 0px;
font-family: verdana, georgia;
overflow-x: hidden;
}
/*****************Blocks*********************/
.navbar {
background-color: #fff;
height: 90px;
width: 100%;
top:0px;
margin-left: 250px;
}
.topContent {
background-color: #eceff1;
height: 200px;
width:100%;
margin-left: 250px;
}
.mainContent {
background-color: #e5e5e5;
height: 800px;
width:800px;
margin-left: 250px;
}
.leftSideNav1 {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #37474f;
}
.leftSideNav2 {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 80px;
background-color: #263238;
text-decoration: none;
}
/*****************Elements*********************/
.leftSideNav1__lists a{
font-size: 10px;
color: #eee;
padding-top: 30px;
margin-left: 10px;
text-decoration: none;
}
.leftSideNav2 {
font-size: 12px;
}
.leftSideNav2 .leftSideNav2__lists > ul{
padding-top: 80px;
}
.leftSideNav2__lists ul {
list-style: none;
padding-bottom: 10px;
}<body>
<div class="container">
<div class="navbar">
</div>
<div class="topContent">
</div>
<div class="mainContent">
</div>
<div class="leftSideNav1">
<div class="leftSideNav1__lists">
<!-- <i class="fa fa-home w3-large"></i> -->
<i class="Tiny material-icons">home</i><br>
<a href="#">Home</a><br>
<i class="material-icons">pause</i><br>
<a href="#">YouTubers</a><br>
<i class="material-icons">assignment</i><br>
<a href="#">Campaigns</a><br>
<i class="material-icons">message</i><br>
<a href="#">Messages</a><br>
<i class="material-icons">pause</i><br>
<a href="#">Videos</a><br>
</div>
</div>
<div class="leftSideNav2">
<div class="leftSideNav2__lists">
<ul class="leftSideNav2__list1">Videos
<li>Action Required</li>
<li>Fund YouTuber</li>
<li>Hired & Funded</li>
<li>Edit Requested</li>
</ul>
<ul class="leftSideNav2__list2">Proposals
<li>New</li>
<li>Declined</li>
<li>Changes Required</li>
<li>Changes Declined</li>
</ul>
<ul class="leftSideNav2__list3">Approvals
<li>Waiting for Approval</li>
<li>Approved / Completed</li>
<li>Video in Dispute</li>
</ul>
</div>
</div>
</div>
</body>
侧边栏中的锚链接和列表存在问题。我无法在2个侧边栏中对齐锚链接和列表。我正在尝试应用CSS属性，但由于应用程序的分层样式不正确，它们可能不适用。
目前，它的外观如下：
但这就是我想要的样子：
2 个答案:
答案 0 :(得分：1)
答案 1 :(得分：0)
/tunnel/gmake run
gmake[1]: Entering directory '/Users/quantum/tunnel/deps/cowboy'
gmake[2]: Entering directory '/Users/quantum/tunnel/deps/cowlib'
gmake[2]: Leaving directory '/Users/quantum/tunnel/deps/cowlib'
gmake[2]: Entering directory '/Users/quantum/tunnel/deps/ranch'
gmake[2]: Leaving directory '/Users/quantum/tunnel/deps/ranch'
GEN rebar.config
gmake[1]: Leaving directory '/Users/quantum/tunnel/deps/cowboy'
gmake[1]: Entering directory '/Users/quantum/tunnel/deps/jiffy'
CC=gcc ./enc compile
gmake -f c_src/Makefile.erlang.mk
gmake[2]: Entering directory '/Users/quantum/tunnel/deps/jiffy'
gmake[2]: Nothing to be done for 'all'.
gmake[2]: Leaving directory '/Users/quantum/tunnel/deps/jiffy'
gmake[1]: Leaving directory '/Users/quantum/tunnel/deps/jiffy'
DEPEND tunnel.d
ERLC tunnel_app.erl
APP tunnel
===> Starting relx build process ...
===> Resolving OTP Applications from directories:
/Users/quantum/tunnel/ebin
/Users/quantum/tunnel/deps
/usr/local/Cellar/erlang/19.2/lib/erlang/lib
/Users/quantum/tunnel/apps
/Users/quantum/tunnel/_rel
===> Resolved tunnel_release-1
===> Including Erts from /usr/local/Cellar/erlang/19.2/lib/erlang
===> release successfully created!
===> tarball /Users/quantum/tunnel/_rel/tunnel_release/tunnel_release-1.tar.gz successfully created!
Exec: /Users/quantum/tunnel/_rel/tunnel_release/erts-8.2/bin/erlexec -boot /Users/quantum/tunnel/_rel/tunnel_release/releases/1/tunnel_release -mode embedded -boot_var ERTS_LIB_DIR /Users/quantum/tunnel/_rel/tunnel_release/erts-8.2/../lib -config /Users/quantum/tunnel/_rel/tunnel_release/releases/1/sys.config -args_file /Users/quantum/tunnel/_rel/tunnel_release/releases/1/vm.args -- console
Root: /Users/quantum/tunnel/_rel/tunnel_release
/Users/quantum/tunnel/_rel/tunnel_release
heart_beat_kill_pid = 3135
Erlang/OTP 19 [erts-8.2] [source] [64-bit] [smp:8:8] [async-threads:10] [hipe] [kernel-poll:false] [dtrace]
=INFO REPORT==== 5-Oct-2017::16:54:36 ===
application: tunnel
exited: {bad_return,
{{tunnel_app,start,[normal,[]]},
{'EXIT',
{undef,
[{cowboy,start_clear,
[my_http_listener,
[{port,8080}],
#{env => #{dispatch => [{'_',[],
[{[<<"info">>],[],lobby_handler,[]},
{[<<"join">>,name],
[],join_handler,[]},
{[<<"player">>,<<"status">>,name],
[],player_status_handler,[]},
{[<<"tables">>,<<"info">>,table_id],
[],table_info_handler,[]},
{[<<"tables">>,<<"play">>,table_id,
name,auth,action,x,y],
[],table_play_handler,[]},
{[<<"assets">>,'...'],
[],cowboy_static,
{dir,
"/users/quantum/tunnel/static/assets/"}}]}]}}],
[]},
{tunnel_app,start,2,
[{file,"src/tunnel_app.erl"},{line,17}]},
{application_master,start_it_old,4,
[{file,"application_master.erl"},
{line,273}]}]}}}}
type: permanent
{"Kernel pid terminated",application_controller,"{application_start_failure,tunnel,{bad_return,{{tunnel_app,start,[normal,[]]},{'EXIT',{undef,[{cowboy,start_clear,[my_http_listener,[{port,8080}],#{env => #{dispatch => [{'_',[],[{[<<\"info\">>],[],lobby_handler,[]},{[<<\"join\">>,name],[],join_handler,[]},{[<<\"player\">>,<<\"status\">>,name],[],player_status_handler,[]},{[<<\"tables\">>,<<\"info\">>,table_id],[],table_info_handler,[]},{[<<\"tables\">>,<<\"play\">>,table_id,name,auth,action,x,y],[],table_play_handler,[]},{[<<\"assets\">>,'...'],[],cowboy_static,{dir,\"/users/quantum/tunnel/static/assets/\"}}]}]}}],[]},{tunnel_app,start,2,[{file,\"src/tunnel_app.erl\"},{line,17}]},{application_master,start_it_old,4,[{file,\"application_master.erl\"},{line,273}]}]}}}}}"}
Kernel pid terminated (application_controller) ({application_start_failure,tunnel,{bad_return,{{tunnel_app,start,[normal,[]]},{'EXIT',{undef,[{cowboy,start_clear,[my_http_listener,[{port,8080}],#{env
heart: Thu Oct 5 16:54:37 2017: Erlang is crashing .. (waiting for crash dump file)
heart: Thu Oct 5 16:54:37 2017: Would reboot. Terminating.
gmake: *** [erlang.mk:6450: run] Error 1
~/tunnel/
body {
margin: 0px;
font-family: verdana, georgia;
overflow-x: hidden;
}
/*****************Blocks*********************/
.navbar {
background-color: #fff;
height: 90px;
width: 100%;
top:0px;
margin-left: 250px;
}
.topContent {
background-color: #eceff1;
height: 200px;
width:100%;
margin-left: 250px;
}
.mainContent {
background-color: #e5e5e5;
height: 800px;
width:800px;
margin-left: 250px;
}
.leftSideNav1 {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #37474f;
}
.leftSideNav2 {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 80px;
background-color: #263238;
text-decoration: none;
}
/*****************Elements*********************/
.leftSideNav1__lists a{
display: block;
text-align: center;
font-size: 10px;
color: #eee;
text-decoration: none;
margin-bottom: 20px;
}
.leftSideNav2 {
font-size: 12px;
}
.leftSideNav2 .leftSideNav2__lists > ul{
}
.leftSideNav2__lists ul {
list-style: none;
}
.leftSideNav1__lists > i{
display: block;
text-align: center;
}
试试这个。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？