Question

我将页面拆分为3个部分

25％宽度
50％宽度
25％宽度

使用text-align:right后，如何让我的菜单成直线。我不想在不使用margin-left原因的情况下使用它，因此网络对其他设备的响应速度更快，看起来更具吸引力。

我期望得到什么 - Imagur Image of expected outcome。我希望菜单从黄线开始。

我在JSFiddle中的当前代码 - JSFiddle Example

Answer 1

您只需添加此css代码：

.first ul{
  text-align:left;
}

您的代码将变为：

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url('//netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css');
.first{
width:25%;
overflow:hidden;
float:left;
text-align:right;
}
.first ul{
  text-align:left;
}
.table{
  width:50%;
  float:left;
}
.three{
width:25%;
float:right;}

<div class="main">

<div class="first">
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</div>
<table class="table">
    <thead>
      <tr>
        <th colspan="2">Firstname</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
<div class="three">
<p>
test</p>
</p>

</div>

</div>

我希望它有所帮助。

Answer 2

如果您要使用Bootstrap，您可以使用随附的现有网格系统。为了使元素与右对齐文本保持对齐，您可以简单地将其浮动：

＆＃13;

ul {
  list-style-type:none;
  margin:0;
  padding:0;
  text-align:right;
  float:left;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
    <div class="col-xs-6">
      <table>
        <thead>
          <tr>
            <th colspan="2">Firstname</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-xs-3">
      test
    </div>
  </div>
</div>

＆＃13;

CSS对齐文本使其直线

2 个答案: