いくつかの単純な CSS 設定の問題: div が中央に配置される、ul li が折り返されない、コンテンツが自動省略記号を超える、など_html/css_WEB-ITnose

1 ページを中心とした div の問題

1) 位置の値が相対的 (相対配置) の場合、CSS 設定属性 margin: 0 auto (0 auto、上下の境界線が 0 であることを示し、左右は幅に応じて同じ値に適応します、つまり中央に配置されます）。

2) 位置の値が相対 (絶対位置) の場合、CSS 設定属性 text-align:left:50%; (左マージン margin-left:-500px) が設定されます。現在の div 幅 負の値 も使用できます)

コード例:

.page {    position:absolute;    width:1000px;    background-image:none;    text-align:center;    left:50%;    margin-left:-500px;}

CSS の負の値を z-index と組み合わせて使用​​すると、いくつかの非常に良い結果が得られますが、常に負の値を使用することになります。特にページコンテンツを割り当てる場合には、大きな危険が潜んでいます。

2 ul li すべての要素を 1 行に配置する方法とその他の方法

最もよく使用されるリスト要素として、その下に li を同じ行に配置したい場合があります。

1) ul- のリストを設定します。 style-type:none; (通常、デフォルトでは、各列の前に黒い点があります。各列の前の点または四角形を削除するには、リスト形式を none に設定します。)

2) float:left of を設定します。 ul と li ; (左にフローティング、つまり各要素が左から右に 1 行に配置されます)

コード例:

.tableclass ul{    float: left;    height: 50px;    left:30px;    line-height: 50px;    position: absolute;    list-style-type:none;}.tableclass ul li{    float:left;    width:100px; }

3 div には内容が多すぎるため、余分なものを省略する必要がある場合があります。これも非常に簡単です

1) div の空白を設定します: nowrap; (div コンテンツを折り返さないように設定し、確実に 1 行に維持します)

2) div のオーバーフローを設定します: hidden (content; div を超える部分は表示されません)

3) div の text-overflow: ellipsis を設定します (テキストがオーバーフローする場合の属性、ellipsis はトリミングされたテキストを表す省略記号を表します)

コード例:

 .videoname{  position:absolute;  left:25px;  height:48px;  width:160px;  top:5px;  font-size:15px;  font-family: Arial;  line-height:45px;  text-align:left;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}