Html 对齐<；李'；s>；在全宽下拉菜单中相邻

所以我有点问题。我已经创建了一个全宽下拉菜单，其中包含一些带有菜单项的

li的

。我用

填充使其全宽：0 1000em；边缘：0-1000em技巧但是现在李的

被放置在彼此下面

我们的目标是把李的旁边，我在这里卡住了。有什么解决办法吗？下面是正在使用的代码

为了让它更清楚一点，我制作了一张图片来展示我的意思。第一个是它现在的显示方式，第二个是我希望它的显示方式：

HTML:

---

您可以将ul显示为内联块

ul.menu{
显示：内联块；
}
菜单李{
列表样式：无；
}
菜单：悬停{
光标：指针；
背景颜色：黄花；
}

一对一
1-2
1-3


二比一
二比二
2-3

如果有人仍在寻找类似的东西，它是这样的：

/*Main menu*/
.header-container .navigation-container {width: 100%; padding: 0; margin:0 auto; clear: both; }
.header-container .main-navigation {}

.header-container .main-navigation ul{float: left; padding:0; list-style-type:none; margin:0;}
.header-container .main-navigation ul li{float:left; margin: 0; margin-left:-10px; margin-right:10px; font-family: 'NewCenturySchlbkLTPro-Roman', Georgia, Times New Roman, serif; text-transform: uppercase; font-size: 12px; position:relative; }
.header-container .main-navigation ul li a{letter-spacing: .2em; color: #000; display: block; padding: 16px 10px 15px 10px; outline-style: none;}
.header-container .main-navigation ul li a:hover{color: #7b4a59; }
.header-container .main-navigation ul li.menu-list:hover > ul{visibility: visible; opacity: 1; border-top:1px solid #cccccc;}
.header-container .main-navigation ul li.menu-list:hover:after{content:""; position:relative; display:block; width:100%; height:1px; background: #FFF; z-index:1000;}

.header-container .main-navigation ul li.menu-list{border-left:1px solid transparent ;border-top:1px solid transparent;border-right:1px solid transparent}
.header-container .main-navigation ul li.menu-list:hover,
.header-container .main-navigation ul li.menu-list.active a{color: #7b4a59; border-left:1px solid #cccccc;border-top:1px solid #cccccc;border-right:1px solid #cccccc}

/*Sub menu*/
.featured-menu{background-color:#e3e2e5;}
.header-container .main-navigation ul.submenu{margin:0;}
.header-container .main-navigation ul li ul.submenu{position: absolute; left: 0;  padding-left: 100em; padding-right: 100em; margin: 0px -1034em 0 -100em; z-index: 101;
    visibility: hidden; opacity: 0; background: #ffffff;)
    -o-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);;
}

.header-container .main-navigation ul li ul.submenu li{display:none; position: relative; left: 0; top: 100%; z-index: 101;}
.header-container .main-navigation ul li ul.submenu li:last-child{}

.header-container .main-navigation ul li ul.submenu li a{padding-top:15px; text-transform:uppercase; font-size:12px; letter-spacing: .2em; color: #000; display: block;  outline-style: none; }
.header-container .main-navigation ul li ul.submenu li a:hover,
.header-container .main-navigation ul li ul.submenu li.active a{color: #7b4a59; box-shadow:none!important}

.header-container .main-navigation ul li:hover ul.submenu li{display: block; z-index:999; background-color:transparent; float:left; padding:25px 15px 25px 10px; overflow:auto;}
.header-container .main-navigation ul li:hover ul.submenu li:first-child{}

/*Sub sub menu*/
.header-container .main-navigation ul li ul.subsubmenu li{box-shadow:none!important; float:none!important; padding-bottom:0!important; padding-top:0!important; padding-left:0!important;}
.header-container .main-navigation ul li ul.subsubmenu li a{margin-left:5px; font-family: 'Swiss721BT-Light',"Helvetica Neue",Helvetica,Arial,sans-serif; text-transform: uppercase;
    font-size: 12px; letter-spacing: .1em; color: #000; padding-bottom:0px;}
.header-container .main-navigation ul li ul.subsubmenu li a:last-child{padding-bottom:15px; padding-top:0px; margin-left:15px;}

---

使用

float

时，需要指定

宽度。如果您不关心
宽度是否相同，只需使用
display:inline。同时发布实际的HTML，而不是绑定的数据，当我尝试将所有项目都放在一个地方时，由于某种原因，我们无法知道输出是什么。绑定的数据只是一些链接，没有什么特别的，也没有那么重要。指定宽度，还是内联？也张贴真正的HTML pleaseSorry，意思是内联。
.header-container .navigation-container {width: 100%; padding: 0; margin:0 auto; clear: both; }
.header-container .main-navigation {}

.header-container .main-navigation ul{float: left;  margin: 3px 0 0 0; padding:0; list-style-type:none}
.header-container .main-navigation ul li{float:left; margin: 0; font-family: 'NewCenturySchlbkLTPro-Roman', Georgia, Times New Roman, serif; text-transform: uppercase; font-size: 12px; position:relative; }
.header-container .main-navigation ul li a{letter-spacing: .2em; color: #000; display: block; padding: 10px 10px 10px 10px; outline-style: none;}
.header-container .main-navigation ul li a:hover,
.header-container .main-navigation ul li.active a{color: #7b4a59; box-shadow: 0 14px 0px 0px white, 135px -8px 0px 0px white, 1px 0 9px 0px #cccccc, -2px 0 6px -3px #cccccc}

.header-container .main-navigation ul.submenu{margin:0;}
.header-container .main-navigation ul li ul.submenu{position:absolute; width:250px; padding-top:15px; }
.header-container .main-navigation ul li ul.submenu li{display:none; position: relative; left: 0; top: 100%; padding: 0 1000em; margin: 0 -1000em; z-index: 101;     -o-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);}

.header-container .main-navigation ul li ul.submenu li a{letter-spacing: .2em; color: #000; display: block; padding: 0; outline-style: none;}
.header-container .main-navigation ul li ul.submenu li a:hover,
.header-container .main-navigation ul li ul.submenu li.active a{color: #7b4a59;}

.header-container .main-navigation ul li:hover ul.submenu li{display:block; z-index:999; background-color:white; float:none; overflow:auto; padding-bottom:25px;}

.header-container .main-navigation ul li ul.subsubmenu li{box-shadow:none;}
.header-container .main-navigation ul li ul.subsubmenu li a{color:red;}

/*Main menu*/
.header-container .navigation-container {width: 100%; padding: 0; margin:0 auto; clear: both; }
.header-container .main-navigation {}

.header-container .main-navigation ul{float: left; padding:0; list-style-type:none; margin:0;}
.header-container .main-navigation ul li{float:left; margin: 0; margin-left:-10px; margin-right:10px; font-family: 'NewCenturySchlbkLTPro-Roman', Georgia, Times New Roman, serif; text-transform: uppercase; font-size: 12px; position:relative; }
.header-container .main-navigation ul li a{letter-spacing: .2em; color: #000; display: block; padding: 16px 10px 15px 10px; outline-style: none;}
.header-container .main-navigation ul li a:hover{color: #7b4a59; }
.header-container .main-navigation ul li.menu-list:hover > ul{visibility: visible; opacity: 1; border-top:1px solid #cccccc;}
.header-container .main-navigation ul li.menu-list:hover:after{content:""; position:relative; display:block; width:100%; height:1px; background: #FFF; z-index:1000;}

.header-container .main-navigation ul li.menu-list{border-left:1px solid transparent ;border-top:1px solid transparent;border-right:1px solid transparent}
.header-container .main-navigation ul li.menu-list:hover,
.header-container .main-navigation ul li.menu-list.active a{color: #7b4a59; border-left:1px solid #cccccc;border-top:1px solid #cccccc;border-right:1px solid #cccccc}

/*Sub menu*/
.featured-menu{background-color:#e3e2e5;}
.header-container .main-navigation ul.submenu{margin:0;}
.header-container .main-navigation ul li ul.submenu{position: absolute; left: 0;  padding-left: 100em; padding-right: 100em; margin: 0px -1034em 0 -100em; z-index: 101;
    visibility: hidden; opacity: 0; background: #ffffff;)
    -o-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);;
}

.header-container .main-navigation ul li ul.submenu li{display:none; position: relative; left: 0; top: 100%; z-index: 101;}
.header-container .main-navigation ul li ul.submenu li:last-child{}

.header-container .main-navigation ul li ul.submenu li a{padding-top:15px; text-transform:uppercase; font-size:12px; letter-spacing: .2em; color: #000; display: block;  outline-style: none; }
.header-container .main-navigation ul li ul.submenu li a:hover,
.header-container .main-navigation ul li ul.submenu li.active a{color: #7b4a59; box-shadow:none!important}

.header-container .main-navigation ul li:hover ul.submenu li{display: block; z-index:999; background-color:transparent; float:left; padding:25px 15px 25px 10px; overflow:auto;}
.header-container .main-navigation ul li:hover ul.submenu li:first-child{}

/*Sub sub menu*/
.header-container .main-navigation ul li ul.subsubmenu li{box-shadow:none!important; float:none!important; padding-bottom:0!important; padding-top:0!important; padding-left:0!important;}
.header-container .main-navigation ul li ul.subsubmenu li a{margin-left:5px; font-family: 'Swiss721BT-Light',"Helvetica Neue",Helvetica,Arial,sans-serif; text-transform: uppercase;
    font-size: 12px; letter-spacing: .1em; color: #000; padding-bottom:0px;}
.header-container .main-navigation ul li ul.subsubmenu li a:last-child{padding-bottom:15px; padding-top:0px; margin-left:15px;}