-2

我正在尝试UL水平设置样式，但我的代码仅在删除两个嵌入时才有效DIV's。

如果我正确删除div = thumb和div = button列表样式。

有没有人知道我该如何解决这个问题？

HTML / PHP：

    <div class="container-app" id="container-app">

    <?php if(isset($events)) { ?> 

            <div>

                <div class="header-text">
                    <h1 style="font-size: 30px;"></h1>
                </div>

                <ul class="events">

                    <?php  foreach ($events as $images){ ?>
                        <li>

                            <div class="thumb">
                                <?php $eventURL = base_url('eventguide/event/id/') . '/'. $images->id; ?>

                                    <a class="open-event" href="<?php echo $eventURL; ?>">
                                        <img src="<?php echo base_url() .  $images->image_link ?>" width = '165' height ='230'>
                                    </a>
                            </div>

                            <div class="button">

                                <a class="open-event" id="pbutton" href="<?php echo $eventURL; ?>">
                                    <b><?php echo date("D jS M", strtotime($images->event_date)); ?></b>
                                </a>
                            </div>
                        </li>
                    <?php } ?>

                </ul>

            </div>
        <?php  } ?>
</div>

CSS：

#container-app ul
{
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#container-app ul li { display: inline; }

#container-app ul li .thumb .open-event { display: inline; }

#container-app ul li .thumb .button { display: inline; }

#container-app ul li a
{
  color:#329AF2;
  text-decoration:none;
  font-weight: bold;
}

#container-app ul li a:hover
{
color: #fff;
background-color: #369;
}
4

2 回答 2

1

尝试删除display: inline，#container-app ul并更改display: inline为。#container-app ul lidisplay: inline-block

于 2013-07-31T00:58:37.803 回答
0

这里有一些可以改进的地方。

首先，默认情况下img和a html 元素是内联的，因此不需要包含 .thumb 和 .button div（默认情况下是块）。

其次，行：#container-app ul li .thumb .button { display: inline; } 是不正确的，因为根据您的 html .thumb 和 .button 是兄弟姐妹，因为上面的 css 指出 .button在 .thumb内部。

整个事情可以简化。

在您的 css 中，删除 #container-app ul 并将其替换为；

.events {margin:0; padding:0; list-style-type:none; text-align:center; }

然后像这样改变你的css的其余部分：

.events li {display:inline-block; }
.events .button { color:#329AF2; text-decoration:none; font-weight: bold; }
.events .button:hover { color:#fff; background-color:#369; }

.events .button {... } 可以替换为 .events-button { / button styles go here / } 并且您可以将 .thumb 更改为 .events-thumb （您需要将类添加到相应的 a 标签在你的 html 中）。

这将在您的 css 中重写为；

.events { ... }
.events li { ... }
.events-thumb { /* add a margin to space out the image from the button */ }
.events-button { /* styles from .style a go here*/ }
.events-button:hover { ... }

上面的新 css 也会表现得更好，因为浏览器只会寻找具有事件类的元素，而不是嵌套在 id 为 container-app 的元素内某处的 ul（CSS 从右到左读取）

希望这可以帮助。

于 2013-07-31T01:41:25.003 回答