Question

I'm trying to do a list with a padding-left transition on hovering the tag inside the <li> tag, as you can see in the following fiddle:

li {
    padding-left: 0;
    transition: padding 0.5s ease-out;
}
li:hover {
    padding-left: 10px;
}
div {
    display: flex;
    padding: 5% 20%;
    justify-content: center;
    align-items: center;
}

<div>
    <img src="https://upload.wikimedia.org/wikipedia/it/4/46/Yoda.JPG" alt="Yoda from wikipedia" width=300 height=300>
    <ul>
        <li><a href="#">Send me an email!</a>

        </li>
        <li><a href="#">Give me a call!</a>

        </li>
    </ul>
</div>

If you hover over (sorry) the first element ('Send me an email'), you will see that the image on the left gets pushed away, while this does not happen if you hover over (sorry again) the second element ('Give me a call').

I'd like to achieve the second behaviour for all the elements in the list, but I cannot solve the problem with the first element. What's wrong with the code? Is it a bug?

Code was tested both on Edge and Chrome (latest versions).

Answer 1

您在悬停CSS上有padding-left: 10px，因此在悬停时li的宽度会扩展10px，如果新宽度没有足够的空间，则图片会移动为li进行调整以适应额外的10px。

解决方案：设置的宽度等于li+10px的{{1}}的正常宽度，ul的最小宽度。这样，当添加填充时，它将容纳li。

10ppx

ul {
  
  display: block;
   width: 150px; /* Set an accomodating width for the ul */
  }


li {
 
    transition: padding 0.5s ease-out;
  min-width: 150px;
  display: inline-blcok;
 
}
li:hover {
  padding-left: 10px;
    
}

div {
    display: flex;
    padding: 5% 20%;
    justify-content: center;
    align-items: center;
}

注意：研究我的所作所为并根据需要进行调整。

Answer 2

将宽度设置为UL并相应地调整div中的填充。

ul{border:1px solid red;width:300px;}/* Specify the width */


li {
    padding-left: 0;
    transition: padding 0.5s ease-out;
}
li:hover {
    padding-left: 10px;
}
div {
    display: flex;
    padding: 5% 10%;  /* Specify the width */
    justify-content: center;
    align-items: center;
}

<div>
    <img src="https://upload.wikimedia.org/wikipedia/it/4/46/Yoda.JPG" alt="Yoda from wikipedia" width=300 height=300/>
    <ul>
        <li><a href="#">Send me an email!</a></li>
        <li><a href="#">Give me a call!</a></li>
    </ul>
</div>

希望这有帮助。！

Answer 3

使用css transform代替填充

＆＃13;

li a{
    display: block;
    transform: translateX(0);
    transition: transform 0.5s ease-out;
}
li:hover a{
    transform: translateX(10px);
}
div {
    display: flex;
    padding: 5% 20%;
    justify-content: center;
    align-items: center;
}

＆＃13;

<div>
    <img src="https://upload.wikimedia.org/wikipedia/it/4/46/Yoda.JPG" alt="Yoda from wikipedia" width=300 height=300>
    <ul>
        <li><a href="#">Send me an email!</a>

        </li>
        <li><a href="#">Give me a call!</a>

        </li>
    </ul>
</div>

＆＃13;

Answer 4

在第二个<li>上没有发生的唯一原因是因为它的宽度比第一个<li>小10倍以上。

如果您不希望图片移动，则必须不要使您的div居中或使<ul>更大，以便<li>可以在<ul>不扩展的情况下展开

Answer 5

向li元素添加填充使它们更宽。

由于第一个li已经是最宽的，因此增加其宽度也会增加包含图像的父ul和祖父母div的宽度。由于div位于屏幕中央，因此加宽它会将最左边的内容（img）移动到左侧。

即使使用填充，第二个li也不像第一个那么宽，因此向其添加填充不会改变祖父母div的宽度，因此图像不会移动。

Answer 6

你可以尝试给图像div宽度为100％并且效果很好。

＆＃13;

void Main()
{
    Console.WriteLine(Dog.Fido.ToString());
}

public abstract class Enumeration<T> where T : Enumeration<T>
{
    private static IEnumerable<T> enumerateAllValues()
    {
        // Obviously use some caching here
        var fields = typeof(T).GetFields(BindingFlags.Public | BindingFlags.Static | BindingFlags.DeclaredOnly);
        return fields.Select(f => f.GetValue(null)).OfType<T>();
    }

    internal static IEnumerable<T> AllValues { get { return enumerateAllValues();}}

    protected Enumeration(int value, string displayName)
    {
        if (!typeof(T).IsSealed)
            throw new NotSupportedException($"Value objects must be sealed, {typeof(T).Name} is not.");
        this.Value = value;
        this.DisplayName = displayName;
    }

    protected int Value { get; }

    protected string DisplayName { get; }

    public override string ToString() { return DisplayName; }       
        // IEquatable implementation based solely on this.Value
}

public static class Enumeration
{
    public static IEnumerable<T> GetAllValues<T>() where T : Enumeration<T>
    {
        return Enumeration<T>.AllValues;
    }
    // Other helper methods, e.g. T Parse(int), bool TryParse(int, out T), etc.
}

public abstract class AnimalTrait<T> : Enumeration<T>
    where T : AnimalTrait<T>
{
    protected AnimalTrait(int value, string displayName) : base(value, displayName) {; }
}

public struct AnimalTraitValuePair<TAnimalTrait> where TAnimalTrait : AnimalTrait<TAnimalTrait>
{

    public TAnimalTrait AnimalTrait { get; }

    public string Value { get; } // Analogy breaks down here, but lets assume we know that the values of animal traits are always strings.

    public AnimalTraitValuePair(TAnimalTrait animalTrait, string value)
    {
        this.AnimalTrait = animalTrait;
        this.Value = value;
    }

    public override string ToString()
    {
        return $"[{AnimalTrait}, {Value}]";
}
}

public abstract class Animal<TAnimal, TAnimalTrait> : Enumeration<TAnimal>
    where TAnimal : Animal<TAnimal, TAnimalTrait>
    where TAnimalTrait : AnimalTrait<TAnimalTrait>
{
    private readonly IList<AnimalTraitValuePair<TAnimalTrait>> animalTraitValuePairList;

    // All animals have a name
    public string Name { get; }

    protected Animal(int i, string name, IEnumerable<AnimalTraitValuePair<TAnimalTrait>> animalTraitValuePairs)
        : base(i, name)
    {
        animalTraitValuePairList = animalTraitValuePairs.ToList();
        this.Name = name;
    }

    public string this[TAnimalTrait animalTrait]
    {
        get
        {
            return animalTraitValuePairList.First(atvp => atvp.AnimalTrait == animalTrait).Value;
        }
    }

    public override string ToString()
    {
        StringBuilder sb = new StringBuilder();
        sb.AppendLine($"{this.Name}'s traits:");
        foreach (var animalTrait in Enumeration.GetAllValues<TAnimalTrait>())
        {
            sb.AppendLine($"[{animalTrait}, {this[animalTrait]}]");
        }
        return sb.ToString();
    }
}

public sealed class DogTrait : AnimalTrait<DogTrait>
{
    public DogTrait(int i, string name) 
        : base(i, name)
    { }
    public static DogTrait Color = new DogTrait(1, "Color");
    public static DogTrait Size = new DogTrait(2, "Size");
}

public sealed class Dog : Animal<Dog, DogTrait>
{
    public Dog(int i, string name, IEnumerable<AnimalTraitValuePair<DogTrait>> animalTraitValuePairs)
        : base(i, name, animalTraitValuePairs)
    {
    }
    public static Dog Fido = new Dog(1, "Fido", new[] {
        new AnimalTraitValuePair<DogTrait>(DogTrait.Color, "Black"),
        new AnimalTraitValuePair<DogTrait>(DogTrait.Size, "Medium"),
    });
}

＆＃13;

li {
    padding-left: 0;
    transition: padding 0.5s ease-out;
}
li:hover {
    padding-left: 10px;
}
div {
    display: flex;
    padding: 5% 20%;
    width: 100%;
  
}

＆＃13;

<a> tag inside </a> <LI> <a> padding transition moves the list on hovering the first element

6 个答案: