Question

这是一个垂直画廊。

http://www.braddockinfotech.com/demo/dvnonline/vod/

当选择图库中的特定视频时，选择保持对齐。我希望下面的图片清晰显示

enter image description here

如何使选择中心对齐。我的意思是目前选择接触容器的左边框而不是容器的右边框（橙色虚线）。我希望选择只选择内部视频图像而不是容器边框

这是html代码

    <body onkeydown="HandleKeyDown(event);">
    <table cellpadding="0px" cellspacing="0px" border="0px" class="sitewidth">
        <tr>
            <td align="left" valign="top" style="width:800px;">
                <div id='divVideoPlayer'></div>
            </td>
            <td align="center" style="width:140px;">
                <div id="divPlaylistContainer">
                    <div id="playlistNavPrev">
                        <a id="imgNavPrev" onclick="MoveToDirection('Up');"><span class="arrow">&nbsp;</span>
                        </a>
                    </div>
                    <div id="divPlaylist">
                        <!--playlist-->
                        <div id="spanSlider" style='top:0px; position:relative;'>
                            <ul id="ulSlider">
                                <?php $index=1 ; $firstVideoUrl='' ; $firstImageUrl='' ; $videoDetails=G
                                etVideoDetails(); echo "<script> var siteUrl = '".$siteUrl.
                                "' </script>"; while ($row=m ysql_fetch_array($videoDetails)) { echo
                                "<script>video[".$index. "]='";echo $row[3]. "';</script>"; echo "<script>image[".$index.
                                "]='";echo $row[2]. "';</script>"; //echo "<script>title[".$index. "]='";echo
                                $row[1]. "';</script>"; echo "<script>title[".$index. "]='";echo str_replace(
                                "'", "\'",$row[1]). "';</script>"; // 0 - id , 1 - Title , 2- ImageUrl, 3
                                - VideoUrl //echo $row[0].$row[1].$row[2].$row[3]. "<br/>"; //echo
                                "<li id='liButton_".$index. "'><a  onclick=\"ShowVideo( '".$index."');\
                                "><img id='ImageButton_".$index. "' title='".$row[1]. "' alt='".$row[1]. "' src=".$siteUrl.
                                "timthumb/timthumb.php?src=".$row[2]. "&amp;h=54&amp;w=109&amp;zc=1&amp;a=c></a></li>"; $index++;
                                } ?>
                            </ul>
                        </div>
                    </div>
                    <div id="playlistNavNxt">
                        <a id="imgNavNext" onclick="MoveToDirection('Down');"><span class="arrow">&nbsp;</span>
                        </a>
                    </div>
                </div>
            </td>
    </table>
</body>

这是javascript代码

 var video = new Array();
 var image = new Array();
 var title = new Array();
 var noOfImagesCanShow = 6;
 var selected = 1;
 var slideNo = 1;


 String.prototype.trim = function () {
     return this.replace(/^\s+|\s+$/g, "");
 };

 function SetPlayList() {
     var listHtml = '';
     var lastIndex = slideNo * noOfImagesCanShow;
     var firstIndex = (slideNo * noOfImagesCanShow) - (noOfImagesCanShow - 1);
     var rowNo = 1;
     for (var i = firstIndex; i <= lastIndex; i++) {
         if (firstIndex >= 1 && lastIndex < title.length) {
             listHtml += "<li id='liButton_" + rowNo + "'><a  onclick=\"ShowVideo('" + i + "');\"><img id='ImageButton_" + i + "' title=\"" + title[i] + "\" alt='" + title[i] + "' src=" + siteUrl + "timthumb/timthumb.php?src=" + image[(i)] + "&amp;h=54&amp;w=109&amp;zc=1&amp;a=c></a></li>";
             rowNo++;
         }
     }
     document.getElementById('ulSlider').innerHTML = listHtml;
     document.getElementById('liButton_1').tabIndex = 2;
     document.getElementById('liButton_1').focus();
 }

 function ShowVideo(videoIndex) {
     var streamToBeUsed = "";
     var provideType = "";
     if (video[videoIndex].trim().substring(0, 7) == "http://") {
         streamToBeUsed = '';
         provideType = "http";
     } else {
         streamToBeUsed = "rtmp://cp87191.edgefcs.net/ondemand/";
         provideType = "rtmp";
     }
     var autostart = "true";

     if (jwplayer("divVideoPlayer") != null) {
         jwplayer("divVideoPlayer").stop();
     }

     jwplayer("divVideoPlayer").setup({
         file: streamToBeUsed + video[videoIndex].trim(),
         image: image[videoIndex],
         icons: "true",
         autostart: autostart,
         screencolor: "black",
         'width': '800',
         'height': '510',
         streamer: streamToBeUsed,
         provider: provideType,
         events: {
             onBeforePlay: function () {
                 document.getElementById('liButton_' + videoIndex).tabIndex = '2';
                 document.getElementById('liButton_' + videoIndex).focus();
             }
         }
     });
     // clearing all style
     var totalImages = noOfImagesCanShow;
     for (var i = 1; i <= totalImages; i++) {
         var imageId = (((slideNo * noOfImagesCanShow) - (noOfImagesCanShow)) + i).toString();
         if (document.getElementById('liButton_' + i) != null && document.getElementById('ImageButton_' + imageId) != null) {
             document.getElementById('liButton_' + i).className = 'inactiveli';
             document.getElementById('ImageButton_' + imageId).className = 'inactive';
         }
     }
     document.getElementById('liButton_' + videoIndex).className = 'activeli';
     document.getElementById('ImageButton_' + (((slideNo - 1) * noOfImagesCanShow) + parseInt(videoIndex)).toString()).className = 'active';

     SetButtonStatus(((slideNo - 1) * noOfImagesCanShow) + parseInt(videoIndex));


     document.getElementById('liButton_' + videoIndex).tabIndex = '2';
     document.getElementById('liButton_' + videoIndex).focus();
     document.getElementById('divVideoPlayer').tabIndex = '-1';

 }

 function SetButtonStatus(imageIndex) {
     if (imageIndex <= noOfImagesCanShow) {
         document.getElementById('imgNavPrev').className = 'disable_up';
         document.getElementById('imgNavPrev').tabIndex = '-1';
         document.getElementById('imgNavNext').tabIndex = '3';
     } else {
         document.getElementById('imgNavPrev').className = 'enable_up';
         document.getElementById('imgNavPrev').tabIndex = '1';
     }

     if (imageIndex > (image.length - noOfImagesCanShow)) {
         document.getElementById('imgNavNext').className = 'disable_down';
         document.getElementById('imgNavNext').tabIndex = '-1';
         document.getElementById('imgNavPrev').tabIndex = '1';
     } else {
         document.getElementById('imgNavNext').className = 'enable_down';
         document.getElementById('imgNavNext').tabIndex = '3';
     }
 }

 function MoveToDirection(direction) {
     if (direction == 'Down') {
         if (document.getElementById('imgNavNext').className != 'disable_down') {
             slideNo++;
             SetButtonStatus(slideNo * noOfImagesCanShow);
             SetPlayList();
         }
     } else if (direction == 'Up') {
         if (document.getElementById('imgNavPrev').className != 'disable_up') {
             slideNo--;
             SetButtonStatus(slideNo * noOfImagesCanShow);
             SetPlayList();
             document.getElementById('liButton_6').focus();
         }
     }
 }

 function HandleKeyDown(ev) {
     if (document.activeElement != null) {
         var element = document.activeElement;

         if (ev.keyCode == 13) {
             /*User Pressed Enter, Handle If required*/
             if (element.id == "imgNavNext" && element.className != "disable_down") {
                 MoveToDirection('Down');
             } else if (element.id == "imgNavPrev" && element.className != "disable_up") {
                 MoveToDirection('Up');
             } else if (element.id.indexOf("liButton_") > -1) {
                 var nameSections = element.id.split('_');

                 ShowVideo(nameSections[1]);
             }
         } else if (ev.keyCode == 40) {
             /*User Pressed Down*/
             if (element.id.indexOf("liButton_") > -1) {
                 var nameSections = element.id.split('_');

                 var nextIndexToFocus = (parseInt(nameSections[1])) + 1;
                 if (document.getElementById("liButton_" + nextIndexToFocus) != null) {
                     document.getElementById("liButton_" + nextIndexToFocus).tabIndex = element.tabIndex;
                     element.tabIndex = "-1";
                     document.getElementById("liButton_" + nextIndexToFocus).focus();
                 } else //need to focus in navNext
                 {
                     if (document.getElementById('imgNavNext').className != 'disable_down') {
                         document.getElementById('imgNavNext').focus();
                     }
                 }

             } else {
                 if (element.id.indexOf("imgNavPrev") > -1) {
                     document.getElementById("liButton_1").focus();
                 }
             }
         } else if (ev.keyCode == 38) {
             /*User Pressed Up Up*/
             if (element.id.indexOf("liButton_") > -1) {
                 var nameSections = element.id.split('_');

                 var nextIndexToFocus = (parseInt(nameSections[1])) - 1;
                 if (document.getElementById("liButton_" + nextIndexToFocus) != null) {
                     document.getElementById("liButton_" + nextIndexToFocus).tabIndex = element.tabIndex;
                     element.tabIndex = "-1";
                     document.getElementById("liButton_" + nextIndexToFocus).focus();
                 } else //need to focus in navPrev
                 {
                     if (document.getElementById('imgNavPrev').className != 'disable_up') {
                         document.getElementById('imgNavPrev').focus();
                     }
                 }
             } else /* To handle up button from imgNavNext */
             {
                 if (element.id.indexOf("imgNavNext") > -1) {
                     document.getElementById("liButton_6").focus();
                 }
             }
         }
     }
 }

Answer 1

将margin:0 auto添加到.sitewidth

.sitewidth {
width: 960px;
margin: 0 auto;
}

Answer 2

  .activeli 
   {
    margin:0 auto;
    width:500px;
   }

Answer 3

我认为你已经将它对齐了。你可以通过删除两个 css-类

中给出的填充来试试它

#divPlaylistContainer {
    border: 1px solid #0080FF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px #888888;
    margin: 10px 0 0 20px;
   /* padding: 0 10px 0 0;  padding removed */
    width: 140px;
}

此外，可以删除#divPlaylist的填充。来源：http://css-tricks.com/removing-the-dotted-outline/

#divPlaylist ul li {
    list-style-type: none;
    /*padding: 5px 0 5px 15px; padding removed*/
}

或者您可以为 li 设置padding: 5px 15px;。我希望这对你有用。

嗯......我编辑了答案。看一看在您的css中为li和<a>添加一个属性。点击它时，Href有一个虚线轮廓。

outline:0;

可能会删除li周围的虚线边框，这样会很酷：）

中心对齐ul内的li的内容

3 个答案: