Question

我正在尝试横向设置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;
}

Answer 1

尝试删除display: inline上的#container-app ul，并将display: inline中的#container-app ul li更改为display: inline-block。

Answer 2

这里有一些可以改进的事情。

首先， img 和 a html元素默认为内联，因此不需要包含.thumb和.button divs < / strong>（默认为阻止）。

其次，行：＃container-app ul li .thumb .button {display：inline; } 是不正确的，因为根据你的html .thumb和.button是兄弟姐妹，其中上面的css说明.button是里面的 .humb。

整个事情可以简化。

在你的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 {/ 按钮样式到这里 /}你可以将.thumb改为.events-thumb（你可以需要将类添加到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从右向左读取）

希望这有帮助。

无法设置包含DIV的UL样式

2 个答案: