Question

第一个列表中填充了我的其他列表的图标，这是技能栏，我试图将它们并排放置，但它不起作用。我试过放float: left;，但它不起作用。我还尝试了float: right;和.content { width: 278px; margin: 0; position: relative; float: left; font-size: 20px; line-height: 2em; padding: 30px 0 30px; } .col { width: 16em; } #skill { top: -500px; list-style: none; padding-top: 30px; float: right; } #skillimg { list-style: none; padding-top: 30px; } #skill li { margin-left: 150px; margin-bottom: 70px; background: #000; height: 10px; width: 14em; border-radius: 3px; border-left: 1px solid #111; border-top: 1px solid #111; border-right: 1px solid #333; border-bottom: 1px solid #333; } #skill li em { float: left; position: relative; top: -40px; } .expand { height: 5px; margin: 2px 0; background: #2187e7; position: absolute; box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.4); } .illustrator { width: 70%; -moz-animation: illustrator 2s ease-out; -webkit-animation: illustrator 2s ease-out; } .photoshop { width: 70%; -moz-animation: photoshop 2s ease-out; -webkit-animation: photoshop 2s ease-out; } .premiere { width: 60%; -moz-animation: premiere 2s ease-out; -webkit-animation: premiere 2s ease-out; } .flash { width: 50%; -moz-animation: flash 2s ease-out; -webkit-animation: flash 2s ease-out; } .sql { width: 70%; -moz-animation: sql 2s ease-out; -webkit-animation: sql 2s ease-out; } .java { width: 70%; -moz-animation: java 2s ease-out; -webkit-animation: java 2s ease-out; } .unity { width: 70%; -moz-animation: unity 2s ease-out; -webkit-animation: unity 2s ease-out; } .html { width: 70%; -moz-animation: html 2s ease-out; -webkit-animation: html 2s ease-out; } .javascript { width: 70%; -moz-animation: javascript 2s ease-out; -webkit-animation: javascript 2s ease-out; } .visualstudio { width: 70%; -moz-animation: visualstudio 2s ease-out; -webkit-animation: visualstudio 2s ease-out; } @-moz-keyframes illustrator { 0% { width: 0px; } 100% { width: 70%; } ; } @-moz-keyframes photoshop { 0% { width: 0px; } 100% { width: 90%; } ; } @-moz-keyframes premiere { 0% { width: 0px; } 100% { width: 50%; } ; } @-moz-keyframes flash { 0% { width: 0px; } 100% { width: 10%; } ; } @-moz-keyframes sql { 0% { width: 0px; } 100% { width: 100%; } ; } @-moz-keyframes java { 0% { width: 0px; } 100% { width: 100%; } ; } @-moz-keyframes unity { 0% { width: 0px; } 100% { width: 100%; } ; } @-moz-keyframes html { 0% { width: 0px; } 100% { width: 100%; } ; } @-moz-keyframes javascript { 0% { width: 0px; } 100% { width: 100%; } ; } @-moz-keyframes visualstudio { 0% { width: 0px; } 100% { width: 100%; } ; } @-webkit-keyframes illustrator { 0% { width: 0px; } 100% { width: 70%; } ; } @-webkit-keyframes photoshop { 0% { width: 0px; } 100% { width: 90%; } ; } @-webkit-keyframes premiere { 0% { width: 0px; } 100% { width: 50%; } ; } @-webkit-keyframes flash { 0% { width: 0px; } 100% { width: 10%; } ; } @-webkit-keyframes sql { 0% { width: 0px; } 100% { width: 100%; } ; } @-webkit-keyframes java { 0% { width: 0px; } 100% { width: 100%; } ; } @-webkit-keyframes unity { 0% { width: 0px; } 100% { width: 100%; } ; } @-webkit-keyframes html { 0% { width: 0px; } 100% { width: 100%; } ; } @-webkit-keyframes javascript { 0% { width: 0px; } 100% { width: 100%; } ; } @-webkit-keyframes visualstudio { 0% { width: 0px; } 100% { width: 100%; } ; }它仍然无法正常工作。

这是HTML代码：

＆＃13;

<div class="content">
                    <div class="col">
                      <h2>My Skills</h2>
                        <ul id="skillimg">
                            <li><img src="img/ai.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/ps.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/pr.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/flash.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/sql.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/java.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/unity.png" width="100px" height="50px"></li>
                            
                            <li><img src="img/html.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/js.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/vs.png" width="100px" height="50px"></li>
                        </ul>
                        
                        <ul id="skill">
                            <li><span class="expand illustrator"></span><em>Illustrator</em></li>
                            
                            <li><span class="expand photoshop"></span><em>Photoshop</em></li>
                            
                            <li><span class="expand premiere"></span><em>Premiere Pro</em></li>
                            
                            <li><span class="expand flash"></span><em>Flash</em></li>
                            
                            <li><span class="expand sql"></span><em>SQL</em></li>
                            
                            <li><span class="expand java"></span><em>Java</em></li>
                            
                            <li><span class="expand unity"></span><em>Unity</em></li>
                            
                            <li><span class="expand html"></span><em>HTML5</em></li>
                            
                            <li><span class="expand javascript"></span><em>JavaScript</em></li>
                            
                            <li><span class="expand visualstudio"></span><em>Visual Studio</em></li>
                        </ul>
                    </div>
                </div>

＆＃13;

public static List<String> FormatMe(String message)
    {
        int maxLength = 10;
        List<String> Line = new List<String>();
        String[] words;

        message = message.Trim();
        words = message.Split(" ".ToCharArray());

        StringBuilder sentence = new StringBuilder();
        foreach (String word in words)
        {
            if((sentence.Length + word.Length) <= maxLength)
            {
                sentence.Append(word + " ");

            }
            else
            {
                Line.Add(sentence.ToString().Trim());
                sentence = new StringBuilder(word + " ");
            }
        }

        if (sentence.Length > 0)
            Line.Add(sentence.ToString().Trim());

        return Line;
    }

    private void btnSplitText_Click(object sender, EventArgs e)
    {
        List<String> Line = new List<string>();
        string message = "The quick brown fox jumps over the lazy dog.";
        Line = FormatMe(message);
    }

＆＃13;

Answer 1

你只需要做两件事

HTML中的

<ul class="skills"></ul>
<ul class="skills"></ul>

在CSS中

ul.skills{float:left; width:45%; margin:3px;}

这将是你的输出。

在LI中，即使是文本或图像，对css来说也不重要

Answer 2

只需display:flex;到.col即可。

＆＃13;

.content {
  width: 278px;
  margin: 0;
  position: relative;
  float: left;
  font-size: 20px;
  line-height: 2em;
  padding: 30px 0 30px;
}
.col {
  width: 16em;
  display:flex;
}
#skill {
  top: -500px;
  list-style: none;
  padding-top: 30px;
  float: right;
}
#skillimg {
  list-style: none;
  padding-top: 30px;
}
#skill li {
  margin-left: 150px;
  margin-bottom: 70px;
  background: #000;
  height: 10px;
  width: 14em;
  border-radius: 3px;
  border-left: 1px solid #111;
  border-top: 1px solid #111;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
#skill li em {
  float: left;
  position: relative;
  top: -40px;
}
.expand {
  height: 5px;
  margin: 2px 0;
  background: #2187e7;
  position: absolute;
  box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.4);
}
.illustrator {
  width: 70%;
  -moz-animation: illustrator 2s ease-out;
  -webkit-animation: illustrator 2s ease-out;
}
.photoshop {
  width: 70%;
  -moz-animation: photoshop 2s ease-out;
  -webkit-animation: photoshop 2s ease-out;
}
.premiere {
  width: 60%;
  -moz-animation: premiere 2s ease-out;
  -webkit-animation: premiere 2s ease-out;
}
.flash {
  width: 50%;
  -moz-animation: flash 2s ease-out;
  -webkit-animation: flash 2s ease-out;
}
.sql {
  width: 70%;
  -moz-animation: sql 2s ease-out;
  -webkit-animation: sql 2s ease-out;
}
.java {
  width: 70%;
  -moz-animation: java 2s ease-out;
  -webkit-animation: java 2s ease-out;
}
.unity {
  width: 70%;
  -moz-animation: unity 2s ease-out;
  -webkit-animation: unity 2s ease-out;
}
.html {
  width: 70%;
  -moz-animation: html 2s ease-out;
  -webkit-animation: html 2s ease-out;
}
.javascript {
  width: 70%;
  -moz-animation: javascript 2s ease-out;
  -webkit-animation: javascript 2s ease-out;
}
.visualstudio {
  width: 70%;
  -moz-animation: visualstudio 2s ease-out;
  -webkit-animation: visualstudio 2s ease-out;
}
@-moz-keyframes illustrator {
  0% {
    width: 0px;
  }
  100% {
    width: 70%;
  }
  ;
}
@-moz-keyframes photoshop {
  0% {
    width: 0px;
  }
  100% {
    width: 90%;
  }
  ;
}
@-moz-keyframes premiere {
  0% {
    width: 0px;
  }
  100% {
    width: 50%;
  }
  ;
}
@-moz-keyframes flash {
  0% {
    width: 0px;
  }
  100% {
    width: 10%;
  }
  ;
}
@-moz-keyframes sql {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes java {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes unity {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes html {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes javascript {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes visualstudio {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes illustrator {
  0% {
    width: 0px;
  }
  100% {
    width: 70%;
  }
  ;
}
@-webkit-keyframes photoshop {
  0% {
    width: 0px;
  }
  100% {
    width: 90%;
  }
  ;
}
@-webkit-keyframes premiere {
  0% {
    width: 0px;
  }
  100% {
    width: 50%;
  }
  ;
}
@-webkit-keyframes flash {
  0% {
    width: 0px;
  }
  100% {
    width: 10%;
  }
  ;
}
@-webkit-keyframes sql {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes java {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes unity {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes html {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes javascript {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes visualstudio {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}

＆＃13;

<div class="content">
                    <div class="col">
                      <h2>My Skills</h2>
                        <ul id="skillimg">
                            <li><img src="img/ai.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/ps.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/pr.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/flash.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/sql.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/java.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/unity.png" width="100px" height="50px"></li>
                            
                            <li><img src="img/html.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/js.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/vs.png" width="100px" height="50px"></li>
                        </ul>
                        
                        <ul id="skill">
                            <li><span class="expand illustrator"></span><em>Illustrator</em></li>
                            
                            <li><span class="expand photoshop"></span><em>Photoshop</em></li>
                            
                            <li><span class="expand premiere"></span><em>Premiere Pro</em></li>
                            
                            <li><span class="expand flash"></span><em>Flash</em></li>
                            
                            <li><span class="expand sql"></span><em>SQL</em></li>
                            
                            <li><span class="expand java"></span><em>Java</em></li>
                            
                            <li><span class="expand unity"></span><em>Unity</em></li>
                            
                            <li><span class="expand html"></span><em>HTML5</em></li>
                            
                            <li><span class="expand javascript"></span><em>JavaScript</em></li>
                            
                            <li><span class="expand visualstudio"></span><em>Visual Studio</em></li>
                        </ul>
                    </div>
                </div>

＆＃13;

Answer 3

您可以应用以下 CSS 来正确执行浮动操作。 Flexbox不需要实现此行为：

#skillimg {
position: relative;
width: 150px;
float: left;
}

#skill {
position: relative;
width: 150px;
float: left;
}

JSfiddle：https://jsfiddle.net/hfx09m3m/

将2个列表并排放置

3 个答案: