Question

我要将动态元素添加到我的ul块中。我想将所有列表的元素集中到父div（brown boder）。例如，如果浏览器的分辨率允许你在一行中设置两个块，我想将这一行与父div相对。

我会非常沮丧。

mycode的：

<!doctype html>

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>

   var tab = [2,3,4,5,7,8,9,11,12,13,14,15];

    $(document).ready(function(){



    $('#godziny').on('click', '.godzina', function(){
        //alert(this.attr('class'));
        $('.yb').removeClass('yb');
        $(this).addClass('yb');
    });

    $('#getElements').click(function() {
         for(i = 0; i < tab.length; ++i) {
        alert(tab[i]);
        setTimeout(function(i){
           $('#godziny').append('<li class="godzina">' + tab[i] + '</li>');             
        }, i*50);
         }

        });
   });
</script>
<style>
#spisSalonow {
    margin: 0 auto;
}   

#spisSalonow > div {
   padding-top: 15px;
   color:red;
}

#wybor_terminu  {
    border: 1px solid brown;
}

#wybor_terminu ul {
    list-style-type: none;
    overflow: hidden;
    border: 1px solid red;
}

#wybor_terminu ul li {
    width: 200px;
    height: 200px;
    text-align: center;
    color: blue;
    border: 0.2em solid green;
    float: left;
    cursor: pointer;
    margin-right: 40px;
    margin-top: 40px;
    /*margin:auto;*/
    /*
       opacity: 0.4;
       filter: alpha(opacity=40);
   */
}

.yb {
   background: yellow;
}

</style>

</head>

<body>

<div id="wrapper">
    <input type="button" value="get Elements" id="getElements"/>
        <section id="content">
            <div class="full">
                <BR/>
                <div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
                    <div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" />  <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
                    <ul id="godziny" style="margin-top: 25px;">

                    </ul>
                </div>
        </section>
</div> 

</body>

</html>

Answer 1

添加以下行：

<强> CSS

#wybor_terminu ul {
  list-style-type: none;
  overflow: hidden;
  /*NEW*/
  padding: 0;
  width: 100%;
}

#wybor_terminu ul li {
  width: 200px;
  height: 200px;
  text-align: center;
  color: blue;
  border: 0.2em solid green;
  /*float: left; You don't need this line*/
  cursor: pointer;
  /*NEW*/
  margin:auto;
  margin-top: 40px;

}

修改

这只是 bootstrap 的快速解决方案，也许它可以帮到你一点点。 jsfiddle

<强>的jQuery

在这一行中我添加了bootstrap类：

$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');

这个代码集中在你的盒子里（不是最好的解决方案，但它有效）：

countBoxes = $('#godziny').width() / 200; alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2; if(countBoxes >= 2.65){ $('#godziny').css('margin-left', alignBoxes); } else{ $('#godziny').css('margin-left', 0); }

如果您更改了屏幕的分辨率，请单击按钮使您的框重新居中。

Answer 2

您可以使用CSS flexbox来实现此目的。以下是有关如何使用flexbox的完整指南的链接。我希望这会有所帮助。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何将所有列表的元素集中到父div

2 个答案: