Question

pre标记内的所有内容当前均未对齐。它从我不知道它甚至没有开始。如何以正确的方式设置内容容器的样式？
我已经尝试了一些方法，但是没有按预期工作。为什么我在pre标签内容的左侧留了一个巨大的空白。

.d-lg-block {
  display: block!important;
}

.code-examples {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
  margin: 0 0 40px;
}

.code-examples .nav-pills {
  background-size: 100%;
  background-image: linear-gradient(#555555, #444444);
  border: 1px solid #444;
  border-radius: 5px 5px 0 0;
  zoom: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
  list-style: none;
  line-height: normal;
  margin: 0;
  padding: 5px 10px;
  position: relative;
  z-index: 1;
}

.code-examples .nav-pills:before,
.code-examples .nav-pills:after {
  content: '\0020';
  display: block;
  height: 0;
  overflow: hidden;
}

.code-examples .nav-pills li {
  display: inline;
}

.code-examples .nav-pills {
  background-size: 100%;
  background-image: linear-gradient(#555555, #444444);
  border: 1px solid #444;
  border-radius: 5px 5px 0 0;
  zoom: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
  list-style: none;
  line-height: normal;
  margin: 0;
  padding: 5px 10px;
  position: relative;
  z-index: 1;
  height: 40px;
}

.code-examples .nav-pills li a {
  color: #ccc;
  display: inline-block;
  line-height: normal;
  float: left;
  font-size: 14px;
  padding: 3px 20px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.code-examples .nav-pills li.active a {
  background-size: 100%;
  background-image: linear-gradient(#222222, #444444);
  border-radius: 25px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.2);
  color: #fff;
  line-height: normal;
}

.code-examples .tab-content {
  background: #333;
  bottom: 0;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  margin-bottom: -80px;
  margin-top: 30px;
  position: absolute;
  top: 0;
}


/*.code-examples .tab-content pre {
    background: transparent;
    border: 0 !important;
    bottom: 0;
    color: #fff;
    font-family: 'Ubuntu Mono', 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    font-size: 13px;
    left: 20px;
    line-height: 1.4;
    margin: 0;
    position: absolute;
    right: 20px;
    top: 20px;
}*/

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="d-lg-block">
  <div id="quickstart_code_samples" class="code-examples">
    <ul class="nav-pills">
      <li class="active"><a href="#curlsample" data-toggle="pill" class="active">Curl</a></li>
      <li class=""> <a href="#rubysample" data-toggle="pill" class="active">Ruby</a></li>
      <li class=""> <a href="#pythonsample" data-toggle="pill" class="active">Python</a></li>
      <li class=""> <a href="#phpsample" data-toggle="pill" class="active">Php</a></li>
    </ul>
    <div class="tab-content">
      <pre id="curlsample" class="tab-pane ace_editor ace-monokai ace_dark active" style="display: block;">
			slksdk
			sdflkdsfkld
			sdflksdlkf
			ldsksd
			ddsds
		</pre>
      <pre id="rubysample" class="tab-pane ace_editor ace-monokai ace_dark" style="display: none;">
			slksdk
			sdflkdsfkld
			sdflksdlkf
			ldsksd
		</pre>
    </div>
  </div>
</div>

Answer 1

它在中间，因为那里有空格：D TAB缩进了。

<pre>
      Indented stuff
      Indented stuff
</pre>

<pre>
Aligned left
Aligned left
</pre>

Answer 2

我已修复您的代码。试试这个。您不能添加预。 pre用于在屏幕上显示确切的代码块。由于使用了pre标签，因此您可以在列表前面获得更多空间。我为您添加了pre和div。使用您需要的任何东西。

cd ${repodir}
ansible-playbook -i rhelhost plugin.yml
result=$?
if [[ $result -eq 0 ]]; then
    echo "SUCCESS"
    ansible-playbook -i rhelhost testsummary.yml
else
    echo "FAILURE"
    exit 1
fi

    <% for(var i = 0; i < filterData.length; i++) { %>
         <select name="hour" >
        <% for(var j = 0; j < filterData.length; j++) { %>
        <option value='<%= filterData[j] %>'><%= filterData[j] %></option>
         <% } %>
      <input type="text" id="sssss">
          </select>
   <% } %>

在预先标记内的内容左侧留出空白区域

2 个答案: