制作<a> anchor tag fill list </a> <li> <a> with display: table-cell

时间:2015-05-04 09:11:27

标签: html css html-lists anchor href

So here is my issue, I am trying to make the whole list element click able, but for some reason with display: table-cell there is a margin/border either side of the anchor tag, so it does not fill the entire width of the list element.

I want to use display:table-cell so my fit evenly across the navbar.

HTML:

	<ul id="nav_list">
    	<li class="selected"><a href="search" id="menu_item" >Search</a></li>
        <li class=""><a href="suggest" id="menu_item" >Suggest</a></li>
        <li class=""><a href="report" id="menu_item" >Report Bug</a></li>
        <li class=""><a href="about" id="menu_item" >About</a></li>
        <li class=""><a href="help" id="menu_item" >Help</a></li>
    </ul>
</nav>

CSS

#container{
	margin: 0 auto;
	width: 500px;	
}
nav ul{
	list-style-type: none;
	background-color:#415d79;
	border-radius: 3px;
	margin: 0;
	padding: 0;
	height:auto;
	width: 100%;
	display: table;
	overflow:hidden;
}
nav li{
    display: table-cell;
	padding: 10px;
	color:#FFF;
	text-align: center;
	font-weight: 500;
	border-right: 2px solid #364F69;
	border-bottom: 3px solid #324961;
}
nav a{
	padding: 10px;
}

2 个答案:

答案 0 :(得分:1)

查看小提琴https://jsfiddle.net/kk9qqq2f/

我已经修改了一些代码,使单元格的整个区域可以点击

<强> CSS

urls.py

答案 1 :(得分:0)

USE [ProposalBuilderDev]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
ALTER PROCEDURE [dbo].[addLog] 
    -- Add the parameters for the stored procedure here
    @table varchar(max), 
    @date date,
    @version varchar(max),
    @process varchar(max),
    @level varchar(max),
    @message varchar(max),
    @stacktrace varchar(max),
    @user varchar(max),
    @environmentID varchar(max),
    @UUID varchar(max),
    @UDID varchar(max),
    @transactionID int,
    @new_identity int OUTPUT

AS
BEGIN
    -- SET NOCOUNT ON added to prevent extra result sets from
    -- interfering with SELECT statements.
    SET NOCOUNT ON;

    -- Insert statements for procedure here
    DECLARE @sql NVARCHAR(MAX);

    SET @sql = 'INSERT INTO dbo.' + @table + '([Timestamp], [Version],Process,[Level],[Message],StackTrace,[User],EnvironmentID,UUID,UDID,TransactionID) VALUES (' + @date + ',' + @version + ',' + @process + ','+ @level + ','+ @message + ','+ @stacktrace + ','+ @user + ','+ @environmentID + ','+ @UUID + ','+ @UDID + ',' + @transactionID + ')'
    EXEC @sql

    SET @new_identity = SCOPE_IDENTITY();
END
  

使用上面的CSS

DEMO