如何从列表中的最后一项删除样式？

发布于 2024-12-22 19:04:21 字数 1189 浏览 0 评论 0原文

我刚刚创建了这样的东西：

Question
有什么方法可以删除最后一列末尾的行吗？（这是一个PHP while）

代码：

<div style="border-bottom: 1px solid #cdcdcd; margin-right: 10px; margin-bottom: 5px; font-size: 10px;">
            <div name="gameicon" style="width: 16px; margin-left: 5px; float: left;">
                <img src="images/games/<?php echo $games['short']; ?>.gif" alt="ICON" />
            </div>
            <div id="game" style="width: 115px; margin-left: 5px; float: left; text-align: right;">
                <b><?php echo $games['game']; ?></b>
            </div>
            <div style="float: left; margin-left: 15px;">
                <?php echo $signs_count; ?>
            </div>
            <div style="float: left; margin-left: 3px; margin-right: 3px;">/</div>
            <div style="float: left; color: <?php echo $site_color; ?>;">
                <b><?php echo $signs_count_paid; ?></b>
            </div>
            <div class="clearer"></div>
        </div>

原文

I've just created something like this:

Question

Is there any way to remove the line from the end of the last colum? (it's a PHP while)

Code:

<div style="border-bottom: 1px solid #cdcdcd; margin-right: 10px; margin-bottom: 5px; font-size: 10px;">
            <div name="gameicon" style="width: 16px; margin-left: 5px; float: left;">
                <img src="images/games/<?php echo $games['short']; ?>.gif" alt="ICON" />
            </div>
            <div id="game" style="width: 115px; margin-left: 5px; float: left; text-align: right;">
                <b><?php echo $games['game']; ?></b>
            </div>
            <div style="float: left; margin-left: 15px;">
                <?php echo $signs_count; ?>
            </div>
            <div style="float: left; margin-left: 3px; margin-right: 3px;">/</div>
            <div style="float: left; color: <?php echo $site_color; ?>;">
                <b><?php echo $signs_count_paid; ?></b>
            </div>
            <div class="clearer"></div>
        </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

优雅的叶子 2024-12-29 19:04:21

编辑：抱歉，我在您编辑代码之前就回答了。这个答案仍然适用，您只需更改 HTML 即可将 div 放入无序列表中。

您可以使用：

li:last-child div
{
    border-bottom: 0;
}

但是，某些浏览器不支持last-child选择器（例如IE7）。对 first-child 选择器有更多支持。您可以选择的一个选项是将该边框添加到元素的顶部而不是底部，然后使用以下方法从顶部删除该边框：

li:first-child div
{
    border-top: 0;
}

另一种选择是使用 jQuery 更改 CSS，这样您就知道它会起作用跨浏览器：

$('#yourUL > li:last-child > div').css('border-bottom','0');

Edit: sorry, I answered before you edited in your code. This answer still applies, you would just have to change your HTML to place the div's in an unordered list.

You could use:

li:last-child div
{
    border-bottom: 0;
}

However, some browsers do not support the last-child selector (IE7, for example). There is more support for the first-child selector. One option you do have is to add that border to the top of the elements instead of the bottom, and then remove that border from the top instead, using:

li:first-child div
{
    border-top: 0;
}

Another option is to use jQuery to alter the CSS, so you know it will work cross-browser:

$('#yourUL > li:last-child > div').css('border-bottom','0');

回复收藏 0 原文

窗影残 2024-12-29 19:04:21

如果您将代码第一行从 :

<div style="border-bottom: 1px solid #cdcdcd; margin-right: 10px; margin-bottom: 5px; font-size: 10px;">

更改为 :

<div class="mainDiv">

CSS:

.mainDiv { 
    border-top: 1px solid #cdcdcd; 
    margin-right: 10px; 
    margin-top: 5px;
    padding-top: 5px; 
    font-size: 10px;
}

.mainDiv:first-child { 
    border: 0;
}

我希望这种方式会有所帮助。

what if you change your code , first line from :

<div style="border-bottom: 1px solid #cdcdcd; margin-right: 10px; margin-bottom: 5px; font-size: 10px;">

To :

<div class="mainDiv">

CSS:

.mainDiv { 
    border-top: 1px solid #cdcdcd; 
    margin-right: 10px; 
    margin-top: 5px;
    padding-top: 5px; 
    font-size: 10px;
}

.mainDiv:first-child { 
    border: 0;
}

I hope this way will be helpful.

回复收藏 0 原文

~没有更多了~