HTML/CSS إعطاء LI هامشًا ولا يؤثر على الأطفال الآخرين

Question

انه يا رفاق!

حصلت على المشكلة التالية:

حصلت على قائمة مع عناصر UL و LI ، الآن عندما أحوم فوق A داخل لي ، أريد زيادة الخط ، والتي تعمل جميع العناصر مباشرة من العنصر المتغير جميعًا إلى اليمين لإنشاء مساحة ، ولكن هناك هو مساحة كافية لهم للوقوف صامتة.

ها هو رمزتي:

.unlistedList {
    position:relative;
    list-style:none;
    min-width:100%;
}

.listedLink {
    position:relative;
    margin: 5px 0 0 0;
    padding: 0 0 0 5em;
    display: inline-table;
    float:left;
}

.linkA {
    font-size:12px;
    text-decoration: none;
    color: #146432;
    font-weight:bold;
    text-transform:uppercase;
    transition: all  0.5s;
    -webkit-transition: all 0.5s;
    -o-transition:all 0.5s;
}

.linkA:hover {
    text-decoration: underline;
    font-size:14px;
    color:#20a150;
}

مع :

<ul class="unlistedList">
  <li class="listedLink"><a href="#" class="linkA">Home</a></li>
  <li class="listedLink"><a href="#" class="linkA">About Us</a></li>
  <li class="listedLink"><a href="#" class="linkA">Portfolio</a></li>
  <li class="listedLink"><a href="#" class="linkA">Services</a></li>
  <li class="listedLink"><a href="#" class="linkA">Blog</a></li>
  <li class="listedLink"><a href="#" class="linkA">Contact Us</a></li>

أعلم أن الفصول الدراسية في UL و IL ليست ضرورية ، لكنني اختبرت كل شيء ولا يمكنني تشغيلها.

Answer 1

عليك أن تعطي li عرض صريح سيكون أكبر من أو يساوي عرض a عندما يتم توسيعها. الآن هذا يعني أن الخاص بك li لن تكون قادرة على النمو في العرض وفقًا لطول نصه. إذا كان هذا هو ما تحتاجه أيضًا ، فليس لدي حل لذلك وفتحته على الأشخاص العظماء من المكدس.

http://jsfiddle.net/treetree/m5xpz/

.listedLink {
    position:relative;
    margin: 5px 0 0 0;
    width:100px;
    display: inline-table;
    float:left;
    border:1px solid black;
}