使用getuikit框架展开第二列

Question

我在一行里有两列。我希望第一列是文本段落，第二列是文本区域。

第一列的宽度是线条宽度的10%，第二列则向右展开。所以我把列放到了uikit网格里。

通过uikit文件，我有下面的代码

<hello name="{{ name }}"></hello>
<p>
   Start editing to see some magic happen :)
</p>
<div uk-grid class="uk-grid">
   <div class="uk-width-1-10" style="background: red;">
     <p>lorem</p>
  </div>
 <div class="uk-width-9-10" style="background: blue;">
   <textarea></textarea>
 </div>
</div>

现在的问题是，两列都占了整条线。宽度不是10%比90%

​

​

请看堆积如山的演示

我想使用uikit (https://getuikit.com/docs/width)而不是一般的css。

Answer 1

Div是块元素，这意味着默认情况下它们将占用整个宽度。通过在样式属性中定义下面的css属性，使它们成为内联元素。

display: inline-block;

Answer 2

使用CSS网格布局模块

检查这个网站

.grid-container {
  display: grid;
  grid-template-columns: 10% 90%;
  background-color: #2196F3;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
}

<div class="grid-container">
  <div class="grid-item">I'm here</div>
  <div class="grid-item" style="text-align: right;"><input type="text"></div>
</div>

​