ad-6ren">
gpt4 book ai didi

php - 如何使用CSS水平对齐

转载 作者:太空宇宙 更新时间:2023-11-04 04:58:06 25 4
gpt4 key购买 nike

PHP 代码

<?php

defined('_JEXEC') or die('Restricted access');
$document = &JFactory::getDocument();
$document->addScript("components/com_jea/views/property/tmpl/js/jquery-1.8.0.min.js");
$document->addScript("components/com_jea/views/property/tmpl/lib/jquery.ad-gallery.js");
$document->addScript("components/com_jea/views/property/tmpl/lib/inside.js");
$document->addStyleSheet("components/com_jea/views/property/tmpl/lib/jquery.ad-gallery.css");
$document->addStyleSheet("components/com_jea/views/property/tmpl/lib/inside.css");
if (!is_array($this->row->images)) {
return ;
}

$mainImage = array_shift($this->row->images);


JHTML::_('behavior.modal', 'a.jea_modal', array('onOpen' => '\onOpenSqueezebox'));
?>


<body>
<div id="container">


<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper">
</div>
<div class="ad-controls">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="<?php echo $mainImage->URL ?>" >
<img src="<?php echo $mainImage->mediumURL ?>" width="100px" height="50px" alt="<?php echo $mainImage->title ?>" title="<?php echo $mainImage->description ?>" />
</a>
</li>


<li class="image<?php echo $num; ?>">
<?php if( !empty($this->row->images)): ?>
<?php foreach($this->row->images as $num => $image) : ?>
<a href="<?php echo $image->URL ?>" >
<img src="<?php echo $image->mediumURL ?>" alt="<?php echo $image->title ?>" width="100px" height="50px" title="<?php echo $image->description ?>" />
</a>
<?php endforeach ?>
</li>
<?php endif ?>
</ul>
</div>
</div>
</div>


</body>

CSS代码

 * {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
color: #333;

}
select, input, textarea {
font-size: 1em;
}
#container {
line-height:0px !important;
border:1px solid #DEE5EB;
}




h2 {
margin-top: 1.2em;
margin-bottom: 0;
padding: 0;
border-bottom: 1px dotted #dedede;
}
h3 {
margin-top: 1.2em;
margin-bottom: 0;
padding: 0;
}
.example {
border: 1px solid #CCC;
background: #f2f2f2;
padding: 10px;
}
ul {
list-style-image:url(list-style.gif);
}
pre {
font-family: "Lucida Console", "Courier New", Verdana;
border: 1px solid #CCC;
background: #f2f2f2;
padding: 10px;
}
code {
font-family: "Lucida Console", "Courier New", Verdana;
margin: 0;
padding: 0;
}

#gallery {
padding: 30px;
background: #F8FAFB;
}

使用上面的编码输出 is this

如何使用CSS水平对齐

最佳答案

这就是为什么:

Deveoper Tools Screenshot

Link to fullsize image

你的 <a>标签在同一个<li>里面标签,这就是为什么它们看起来像那样。放<li class="image<?php echo $num; ?>">在你的里面 foreach循环。

<?php if(!empty($this->row->images)): ?>
<?php foreach($this->row->images as $num => $image): ?>
<li class="image<?php echo $num; ?>">
<a href="<?php echo $image->URL ?>" >
<img src="<?php echo $image->mediumURL ?>" alt="<?php echo $image->title ?>" width="100px" height="50px" title="<?php echo $image->description ?>" />
</a>
</li>
<?php endforeach ?>
<?php endif ?>

关于php - 如何使用CSS水平对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12017639/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com