Question

我想在一个栏上添加所有这些技能。文本不需要显示，只是希望它们全部显示在同一个而不是四个单独的

＆＃13;

public ActionResult ExportDataInExcel()
        {
            ExportData(LId, WId, xyz);
            return View("Index");
        }

＆＃13;

* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}

＆＃13;

的。因为它的四个，所有都需要25％

Answer 1

首先要知道的是div是块元素，并且将占用其容器的100％（在这种情况下是容器div，它是<body>的100％）。您需要将display属性设置为display: inline-block。这将允许它们成为设定宽度。

其次，宽度的百分比需要加起来为100％或更少。超过100％，他们将开始包装到下一行。

请参阅下面的代码snipet。

编辑：还应该提到所有较小的div都需要在一个容器中，而不是每个容器都在自己的容器中，如果你希望它们像这样一起出现。

* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
  display: inline-block;
}

.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 35%; background-color: #f44336;}
.php {width: 30%; background-color: #808080;}

<html>
<head>
<style>

</style>
</head>
<body>

<h1>My Skills</h1>

<div class="container">
  <div class="skills html">10%</div>  

  <div class="skills css">80%</div>

  <div class="skills js">65%</div>

  <div class="skills php">60%</div>
</div>

</body>
</html>

css使div显示在栏中彼此相邻

1 个答案: