حافظ على تغيير حجم النص من دفع العناصر الأخرى في الحاوية الخاصة به حول؟

StackOverflow https://stackoverflow.com/questions/217741

  •  03-07-2019
  •  | 
  •  

سؤال

ولدي ما يلي أتش تي أم أل

          <div id="menu">
            <ul class="horizMenu">
            <li id="active"><a href="#" id="current">About</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Item four</a></li>
            <li><a href="#">Item five</a></li>
            </ul>
        </div>

وفي المغلق لدي

.horizMenu li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}
#menu
{


    text-align:center;
    margin-bottom:10px;
    letter-spacing:7px;
}
#menu a
{
    color:red;

}
#menu a:hover
{
    color:blue;
    font-weight:bold;
}

وكل شيء يعمل بشكل جيد، إلا أنني عندما الماوس فوق الروابط، ويتغير لون ويصبح جريء، وهو ما أريد، ولكنه يسبب أيضا كل العناصر لى أخرى لنقل قليلا ثم نقل مرة أخرى عند الماوس حالا. هل هناك طريقة سهلة لوقف هذا من الحدوث؟

هل كانت مفيدة؟

المحلول

ولست متأكدا من -1ed، ولكن الجواب ماورو هو أساسا الصحيح: لا يمكنك ان تجعل مسلي عنصر مع عرض تلقائي يعتمد على ما كان يمكن أن يكون العرض إذا كان الخط الداخل لا جريء

ومع ذلك، فإن "تعويم: غادر؛" وحكم يكون من الضروري أيضا كما لا يمكنك تعيين عرض عنصر مضمنة العرض. و 'م' ربما تكون وحدة أفضل، لجعل المطلوبة عرض تعتمد على حجم الخط في أزرار.

نصائح أخرى

وإضافة العرض إلى عنصر قائمة العناصر التي هي أكبر من عرض الغامق من البنود، وبهذه الطريقة أنها لن تكون دفعت من الخط.

#menu li
{
   width: 150px;
}

وبدلا من ذلك يمكنك أن تحاول خط أحادي المسافة، التي لن تتأثر غامق / unbold على التحويم.

وحاول استخدام هذا menutext { خط الطول: 10px؛ /* أو أيا كان */ }

ووأيضا، لتعيين عرض عنصر مضمنة، استخدم العرض: مضمنة كتلة؛

وتعويم: غادر قد يكون غير ودية جدا، إذا كنت لا تستخدم وأنها عبث الامور استخدام واضحة: على حد سواء

ولقد كان مجرد نفس المشكلة. حل فكرت، ويمكن استخدامها من الآن فصاعدا، هو استخدام النص الظل بدلا من ذلك.

a:hover {
  color:blue;
  text-shadow:0px 0px 1px blue;
}

والنص سوف ننظر قليلا طمس على الرغم من. إذا قمت بتعيين المعلمة 3RD إلى 0، لن يتم طمس النص ولكن سوف تبدو أكثر جرأة قليلا فقط.

وأنا أقول هذا هو أفضل من التعامل مع النصوص ذات العرض الديناميكي.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top