具有固定HTML结构的内联列表之后的链接_Html_Css_Css Float

具有固定HTML结构的内联列表之后的链接

html css

具有固定HTML结构的内联列表之后的链接,html,css,css-float,Html,Css,Css Float,大家好我的HTML结构无法更改： <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>...</li> </ul> <a href="#">more</a> </div> 一, 二,

大家好

我的HTML结构无法更改：

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>...</li>
  </ul>
  <a href="#">more</a>
</div>



一,
二,
三,
四,

这样做的目的是在不使用javascript的情况下，将链接放在最后一个“li”之后

以下是我想做的：

这里是。

您可以使用css属性：last child来更改最后一个正方形的样式

顺便说一句，请注意这个问题

这里有一个简单的例子

您的电脑已更新。

工作正常

  <!DOCTYPE html >
<html >
<head>

<style>
ul li
{
    float:left;
    display:inline-block;
    width:40px;
    background-color:#FFC0CB;
    margin-right:5px;
    margin-bottom:5px;
    height:40px;
}
a
{
        float:left;
    display:inline-block;
    background-color:#800080;
    height:40px;
    color:white;
    width:40px;
    vertical-align:middle;
}
div ul
{
    width:120px;
}
</style>
</head>


<body>
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>...</li>
  </ul>
  <a href="#">more</a>
</div>
</body>
</html>


ulli
{
浮动：左；
显示：内联块；
宽度：40px；
背景色：#FFC0CB；
右边距：5px；
边缘底部：5px；
高度：40px；
}
A.
{
浮动：左；
显示：内联块；
背景色：#800080；
高度：40px；
颜色：白色；
宽度：40px；
垂直对齐：中间对齐；
}
迪沃
{
宽度：120px；
}

一,
二,
三,
四,

希望这有帮助


<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <a href="#">more</a>
  </ul>
</div>


一,
二,
三,
四,
五,
一,
二,
三,
四,
五,
一,
二,
三,
四,
五,
一,
二,
三,
四,

只需将和准确地移到

之前即可。。你们在哪里改变最后一种元素的颜色？我太蠢了，忘了把li放在“float”而不是ul。很遗憾，很抱歉浪费了您的时间：/Solved。可能是重复的

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <a href="#">more</a>
  </ul>
</div>