我有一个问题,我有一个HTML问题,我不知道我是否使用最好的方法,所以这是我的问题:Everthing是好的:http://screencast.com/t/uJmffaxE 如果我有更多的空间,这里开始出现问题:http://screencast.com/t/1z1GRhOLK 这是我的代码:
<div id="wrap-categories" class="clearfix">
<?php if($this->categories !== false): ?>
<ul>
<?php foreach($this->categories as $category):?>
<li>
<strong><?=$category['name']?></strong><br />
<?php if($this->artistsHelper($category['id']) !== false): ?>
<?php foreach($this->artistsHelper($category['id']) as $artist): ?>
<p><?=$artist['name']?></p>
<?php endforeach; ?>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
以下是生成时标记的外观:
<div id="wrap-categories" class="clearfix">
<ul>
<li>
<strong>Dj's</strong><br />
<p>Big artists</p>
<p>asddssdadsasda</p>
<p>Gigle bossu</p>
</li>
<li>
<strong>Make up</strong><br />
<p>Cool</p>
</li>
<li>
<strong>Mamam</strong><br />
</li>
<li>
<strong>Tata</strong><br />
</li>
<li>
<strong>Dawaj</strong><br />
</li>
<li>
<strong>Sexy</strong><br />
</li>
<li>
<strong>Bitch</strong><br />
</li>
<li>
<strong>Armin</strong><br />
</li>
<li>
<strong>Lol</strong><br />
</li>
<li>
<strong>Gogu</strong><br />
</li>
<li>
<strong>Penal</strong><br />
</li>
<li>
<strong>Asasin</strong><br />
</li>
</ul>
</div>
css
#wrap-categories ul li{
float:left;
margin-right:10px;
}
请帮忙吗?!
<?php $x = 1?>
<?php if($this->categories !== false): ?>
<?php foreach($this->categories as $category):?>
<div class="column" <?=($x == 6) ? "style=\"clear:left\"" : false;?>>
<ul>
<li class="category"><?=$category['name']?></li> <!-- header data... -->
<?php if($this->artistsHelper($category['id']) !== false): ?>
<?php foreach($this->artistsHelper($category['id']) as $artist): ?>
<li><?=$artist['name']?></li> <!-- no class info here because its just text -->
<?php endforeach; ?>
<?php endif; ?>
</ul>
<?php ($x == 6) ? $x = 1 : $x++;?>
</div>
<?php endforeach; ?>
<?php endif; ?>
有几个问题需要解决。首先,UL代表无序列表,如果您拥有的只是第一列数据,那么它就很棒。我只能假设您需要填写更多的数据列(横跨水平轴),因此UL是错误的父标记。如果是正确的标记,则需要附加开始和结束LI(对于列表项)标记。
@Jonathan Sampson的评论是正确的。你会在网上和其他地方看到很多帖子,说明邪恶的表是怎样的,当被误用于布局时也是如此。 根据您向我们展示的内容,您有表格数据,并且应该使用Table标记作为父标记。
更新
我似乎误解了你的数据的性质。来回走动后,这是您的解决方案:
<style type="text/css">
.column
{
float: left;
display: inline;
clear: none;
margin: 0 5px;
}
.column UL LI
{
list-style: none;
}
.category
{
font-weight: bold;
}
</style>
<div> <!-- this is an outer/wrapper/container -->
<?php if($this->categories !== false): ?>
<?php foreach($this->categories as $category):?>
<div class="column">
<ul>
<li class="category"><?=$category['name']?></li> <!-- header data... -->
<?php if($this->artistsHelper($category['id']) !== false): ?>
<?php foreach($this->artistsHelper($category['id']) as $artist): ?>
<li><?=$artist['name']?></li> <!-- no class info here because its just text -->
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
我在这里发布的内容与您开始时的内容存在一些差异:
我认为你必须使用样式表(css)来使它工作。尝试在列表中添加固定宽度。
如果我理解正确你的问题是源代码缩进。这是对的吗? Here will be your answer。当我使用Netbeans IDE的源代码 - >格式选项时,我遇到了这个问题:
<div class="for">
<?php for ($i = 0; $i < 10; $i++): ?>
<p> <!-- this "p" without indentation will be correct rendered -->
paragraph
</p> <!-- this one will always render wrongly -->
<?php endfor; ?>
但是如果使用源代码 - >格式选项或自己缩进它将使用额外的缩进进行渲染。使用print或echo它没有出错。