-1

私はCSSの初心者で、おそらく非常に簡単で、どこに尋ねたらよいかわからないものに行き詰まっています! - Wordpress のサポートでは、css ヘルプを行っていないため、穏やかに拒否されました.. :(

ここに私の問題があります-2つのulアイテムをインラインに取得できません:

http://cssdesk.com/Wm8yb

4

6 に答える 6

0

このスタック オーバーフロー スレッドには、いくつかの適切な応答があります: CSS: display:inline-block および position:absolute

また、.socialicons が ul であるという Jonathan の返信にも注意してください。

そうは言っても、次の 2 つの変更を行うと、li 要素がインライン化されます。

.socialicons {
  list-style: none; 
  display: inline-block;
  padding-left: 0; 
  padding-bottom: 0;
}  


.socialicons li {
    width:15px;
    display: inline-block;
    padding: 0.3em;
}
于 2013-11-04T17:30:52.033 に答える
0

この<ul>要素は、socialicons クラスを持つ要素です。

試す：

ul.socialicons li
于 2013-11-04T17:21:47.040 に答える
0

これがあなたの答えです：

http://cssdesk.com/mJjJE

.social両方の画像に収まるようにdiv の幅を増やす必要があります。また、 ulに属しているため90px削除するか、ルールを次のように変更する必要があります。**ul**.socialicons

.socialicons ul

に：

ul.socialicons
于 2013-11-04T17:25:23.057 に答える
0

使用 display:inline

また

float:left
于 2013-11-04T17:26:07.980 に答える
0

CSS にはいくつかの問題があります。<ul>要素を閉じておらず、 の幅が<ul>小さすぎて、<li>要素が 1 つの列に詰め込まれています。CSS セレクターの構文も混同しています。代わりに、.socialicons ulあなたが望むもののように見えます.socialicons。

子孫セレクターを使用する必要があるのは、ごくまれなケースです。CSS は右から左に解析されます。詳細については、こちらを参照してください: http://css-tricks.com/effectively-rendering-css/

http://cssdesk.com/D8xrT

HTML

<div class="social">
      <ul class="socialicons">
        <li id="facebook"><a href="#"><img alt="Facebook" src="http://placekitten.com/g/24/50" width="24" height="50" /></a></li>
        <li id="twitter"><a href="#"><img alt="Twitter" src="http://placekitten.com/g/30/50" width="30" height="50" /></a></li>        
      </ul>
</div>

CSS

.social {
  position: absolute; 
  right: 1.5%;
  top: 5px;
  width: 75px;
}

.socialicons {
    list-style: none; 
  display: inline;
  padding-left: 0; 
  padding-bottom: 0;
}  


.socialicons li {
     display: inline-block;
   padding: 0.3em;
   float:left;
}  

.socialicons ol, ul {
list-style: none;
display: inline-block;
}

.socialicons ul a {
    display: inline-block; 
    text-decoration: none; 
}


.socialicons img {
  max-width: 50%;
  height: auto;
}
于 2013-11-04T17:31:23.143 に答える
0

私はあなたのCSSにいくつかの変更を加えましたhttp://cssdesk.com/LAfFN

それが役立つことを願っています。

于 2013-11-04T17:27:11.220 に答える