how to align horizontally using CSS

Question

PHP Code

<?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 code

 * {
    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;
  }

Using above cods the output is this

how to align horizontally using CSS

Answer 1

This is why:

Deveoper Tools截图

Link to fullsize image

Your <a> tags are inside the same <li> tag, that's why they appear like that. Put <li class="image<?php echo $num; ?>"> inside your foreach loop.

<?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 ?>

Answer 2

对于具有类ad-thumb-list ul ，使宽度更大，这就是全部。

how to align horizontally using CSS

Question

2 answers

solution1
2 ACCPTED 2012-08-18 10:15:29

solution2
0 2012-08-18 10:32:29

how to align horizontally using CSS

Question

2 answers

solution1 2 ACCPTED 2012-08-18 10:15:29

solution2 0 2012-08-18 10:32:29

solution1
2 ACCPTED 2012-08-18 10:15:29

solution2
0 2012-08-18 10:32:29