與子彈刪除和保持相同的結構的問題

我在之前的帖子中看到，阻止這些惱人的項目符號出現在我們美麗的HTML中的解決方案是在我們的CSS中添加：list-style-type: none;。它看起來this方式現在與子彈刪除和保持相同的結構的問題

好的，但問題是這樣的：我使用：display: list-item;，如果我再補充一點的CSS代碼，它更改爲this

正如你可以看到它變得亂七八糟。任何可能的方法來防止所有的混亂或刪除子彈沒有發生？並保持相同的結構，5列在一排相同的大小，並允許一些人的是「雙數據」（左浮動右浮動）

<!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; }

來源

2016-01-28 Roucher

你們是惡劣的。建議更改，然後給OP幾分鐘更新，然後再進行垃圾郵件向下投票。 Geesh。 @Roucher，他們問你是否可以在你的問題中發佈代碼的HTML/CSS。 – Dave

不完全清楚你的意思是「所有搞砸了」？ –

嘗試設置您的LI顯示：塊;這可能會迫使它恢復原狀。 – Scopestyle

這個問題已經什麼到使用子彈或display:list-item和「搞砸」佈局導致#small11元素崩潰，因爲它只包含浮動元素。

所有需要的是一個「clearfix」，其中there are several.

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

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

來源

2016-01-28 15:25:09

我也意識到之後：我的代碼現在像在原帖中發佈。 – Roucher

這裏不鼓勵在發佈答案後更改代碼。事實上，它被壓在了一邊，因爲它可能會使答案失效......不這樣做。 –

無法編輯：無論如何，我希望所有5個全局進入同一行，因此您的選項無效。那麼，代碼是回到原來的。 – Roucher

與子彈刪除和保持相同的結構的問題

回答

相關問題