在css中将文本移动到同一行答案

【问题标题】：Move text on the same line in css在css中将文本移动到同一行
【发布时间】：2017-09-05 00:02:56
【问题描述】：

我的问题是，如果第二个 div 的文本较少，则在页脚中。当屏幕较小时，第三个 div 比第四个 div 高很多。我想在第一个 div 上放置一个固定高度。

我试过了：

.footer ul {
  height: 100px;
}

但它与文本重叠

<div class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul>
          <li class="Heading">TEST</li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul>
          <li class="Heading">TEST</li>
          <li><a href="#">Test Account</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul class="padding-none">
          <li class="Heading">SUBSCRIBE TO NEWSLETTER</li>
          <input type="text" id="sub-input" name="subscribe" placeholder="Enter your email address" />
        </ul>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul>
          <li class="Heading">Test</li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Demo

【问题讨论】：

您介意发布您的代码的工作示例吗？
我很困惑，你想给你的第一列一个固定的高度还是你只想让所有的列都一样高？？
演示jsfiddle.net/d81v1k01@scarsam
所有列高度相同@M.KHossain
@user4756836 有什么进展吗？

标签： html css styles html-lists

【解决方案1】：

您可以使用row-eq-height（如之前的答案中所述），但如果仅放置该类，它仍然无法正常工作，请使用此 css 代码作为行

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

见下面的 sn-p 或jsfiddle

footer{
	background-color: #333742;
	color: #8b94a4;
	padding-top: 50px;
	float: bottom;
}
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
#sub-input{
	background-color: #393e4a;
	color : #7e8796;
	border: 0;
	border-radius: 20px;
	width: 250px;
	height: 40px;
	padding : 14px;
	padding-left: 30px;
}

.footer ul{
	list-style: none;
}

.footer ul a{
	text-decoration: none;
	color: #8b94a4;
}

.footer ul li{
	padding: 7px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="footer">
  <div class="container-fluid">
    <div class="row row-eq-height">
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul>
          <li class="Heading">TEST</li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul>
          <li class="Heading">TEST</li>
          <li><a href="#">Test Account</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul class="padding-none">
          <li class="Heading">SUBSCRIBE TO NEWSLETTER</li>
          <input type="text" id="sub-input" name="subscribe" placeholder="Enter your email address" />
        </ul>
      </div>
      <div class="col-md-3 col-sm-4 col-xs-6">
        <ul>
          <li class="Heading">Test</li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Test</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

尝试在行和列中使用 .row-eq-height 类以了解更多信息，请访问

Bootstrap equal-height columns

这是一个例子：

<div class="row row-eq-height">
    <div class="col-xs-3"><ul>
      <li class="Heading">Test</li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul></div>
    <div class="col-xs-3"><ul>
      <li class="Heading">TEST</li>
      <li><a href="#">Test Account</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul></div>
    <div class="col-xs-4"><ul class="padding-none">
      <li class="Heading">SUBSCRIBE TO NEWSLETTER</li>
      <input type="text" id="sub-input" name="subscribe" placeholder="Enter your email address" />
    </ul></div>
  <div class="col-xs-4"><ul>
      <li class="Heading">Test</li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul></div>
  </div>

希望有所帮助。

【讨论】：

【解决方案3】：

不确定这是否是您要查找的内容，但请尝试将其添加到您的代码中。 clear 我在下面发布的 HTML 和 CSS。这是更新后的fiddle。

HTML（添加到页脚的第三个 div）

<div class="col-md-3 col-sm-4 col-xs-6 clear">
  <ul class="padding-none">
    <li class="Heading">SUBSCRIBE TO NEWSLETTER</li>
    <input type="text" id="sub-input" name="subscribe" placeholder="Enter your email address" />
  </ul>
</div>

CSS

.clear {
  clear: both;
}
@media only screen and (min-width : 768px)  {
  .clear {
    clear: none;
  }
}

【讨论】：