Question

我在上一篇文章中看到，防止那些令人讨厌的子弹出现在我们漂亮的HTML中的解决方案是在我们的CSS中添加：list-style-type: none;。它现在看起来this

好的，但问题如下：我正在使用：display: list-item;如果我添加了css代码，则会更改为this

正如你所看到的那样搞得一团糟。任何可能的方法来防止所有混乱或删除子弹没有发生这种情况？并保持相同的结构，连续5列具有相同的大小，并允许其中的一些是＆＃34;双数据＆＃34; （左浮动和右浮动）

    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
    <input type="text" id="input" class="input" value="" autofocus />
    <div id="main" class="main">
        <div id="header">Main</div>
        <div id="global1" class="global">
            Global1
            <div id="small11" class="small">
                <div class="izq">asdfasdf asdfasdfasdf</div>
                <div class="der">1234</div>
            </div>
            <div id="small12" class="small">aaaa</div>
            <div id="small13" class="small">ssss</div>
            <div id="small14" class="small">ddd</div>
            <div id="small15" class="small">ffff</div>
        </div>
        <div id="global2" class="global">
            Global2
            <div id="small21" class="small">abcdef</div>
            <div id="small22" class="small">fedcba</div>
            <div id="small23" class="small">facbde</div>
            <div id="small24" class="small">decfab</div>
            <div id="small25" class="small">bacfed</div>
        </div>
        <div id="global3" class="global">
            Global3
            <div id="small31" class="small">eeeeee</div>
            <div id="small32" class="small">eabdc</div>
            <div id="small33" class="small">bcdae</div>
            <div id="small34" class="small">dcbea</div>
            <div id="small35" class="small">eadcb</div>
        </div>
        <div id="global4" class="global">
            Global4
            <div id="small41" class="small">decab</div>
            <div id="small42" class="small">baced</div>
            <div id="small43" class="small">becad</div>
            <div id="small44" class="small">daceb</div>
            <div id="small45" class="small">cedab</div>
        </div>
        <div id="global5" class="global">
            Global5
            <div id="small51" class="small">cadeb</div>
            <div id="small52" class="small">cadeb</div>
            <div id="small53" class="small">cedab</div>
            <div id="small54" class="small">eadcb</div>
            <div id="small55" class="small">aebdc</div>
        </div>
    </div>
</body>
</html>




body{
text-align: center;
    font-family: helvetica;
}
div {
    margin: 1px;
}
#main {

}
#input {
    width: 10%;
    padding: 1px;
    margin: auto;
}
.global{
    width: 18%;
    float: left;
    border: 1px solid #a1a1a1;
    border-radius: 5px;
}
.small{
    border: 1px solid #AA0000;
    border-radius: 0px;
    margin: 2px;
    display: list-item;
}
#header {
    text-align:left;
    clear: both;
    font-size: 22px;
}
ul
{
    list-style-type: none;
}
.izq { float: left; }
.der { float: right; }

Answer 1

此问题与子弹或display:list-item以及＆＃34;搞砸了＃34; 布局导致#small11元素折叠，因为它只包含浮动元素。

所需要的只是一个＆＃34; clearfix＆＃34;其中there are several.

＆＃13;

body {
  text-align: center;
  font-family: helvetica;
}
div {
  margin: 1px;
}
#main {} #input {
  width: 10%;
  padding: 1px;
  margin: auto;
}
.global {
  width: 50%;
  /* for this demo */
  float: left;
  border: 1px solid #a1a1a1;
  border-radius: 5px;
}
.small {
  border: 1px solid #AA0000;
  border-radius: 0px;
  margin: 2px;
  display: list-item;
  list-style-type: none;
  overflow: hidden;
  /* cleafix */
}
#header {
  text-align: left;
  clear: both;
  font-size: 22px;
}
.izq {
  float: left;
}
.der {
  float: right;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" class="main">
  <div id="global1" class="global">
    Global1
    <div id="small11" class="small">
      <div class="izq">asdfasdf asdfasdfasdf</div>
      <div class="der">1234</div>
    </div>
    <div id="small12" class="small">aaaa</div>
    <div id="small13" class="small">ssss</div>
    <div id="small14" class="small">ddd</div>
    <div id="small15" class="small">ffff</div>
  </div>
</div>

＆＃13;

子弹删除并保持相同结构的麻烦

1 个答案: