那些遇到过的问题

将内联元素对齐到右侧

Rob*_*eek 14 css

如何将两个文本元素对齐,一个在左侧,另一个在右侧,也在同一行上.我知道它可以使用浮点数完成,但我想要一个浮点数减少的解决方案.我正在寻找一种方法来使用它display:inline.

HTML:

<div class="contailner">
    <div class="inlineLeft">Item 1</div>
    <div class="inlineRight">Item 2</div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.container {
    width: 600px;
    border: 1px solid blue;
}

.inlineLeft, .inlineRight {
    display: inline;
}

.inlineRight {
    ...align right...   
}
Run Code Online (Sandbox Code Playgroud)

Mar*_*jak 13

你可以position:absolute在内联元素和position:relative容器上使用它.然后,您可以按照所需的方式将内联元素与容器对齐.像这样的东西:

.container {
    position: relative;
    width: 600px;
    border: 1px solid blue;
}

.inlineLeft, .inlineRight {
    position: absolute;
    display: inline;
}

.inlineRight {
    right: 0;
}
Run Code Online (Sandbox Code Playgroud)

DEMO

  • 仔细看看你的演示,你会发现容器的'height`是0,这肯定是各种各样的错误.容器的高度应*包含*其元素. (7认同)

Aka*_*ash 8

更新 - 2019, April

我们也可以与css flex.

div.flex-box {
    display: flex;
    justify-content: space-between;
    border: 2px deeppink dashed;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="flex-box">
    <span>span element 1</span>
    <span>span element 2</span>
</div>
Run Code Online (Sandbox Code Playgroud)

以前的回答

我们可以通过以下方式实现display:table：

.container {
    border: 2px blue dashed;
    display: table;
    width: 100%;
    /*MARGIN (NOT REQUIRED)*/
    margin: auto;
    margin-top: 100px;
    width: 500px;
}
.inlineRight {
    display: table-cell;
    text-align: right;
}
.inlineLeft {
    display: table-cell;
    text-align: left;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
    <div class="inlineLeft">Item 1</div>
    <div class="inlineRight">Item 2</div>
</div>
Run Code Online (Sandbox Code Playgroud)

祝你好运...

G-C*_*Cyr 3

您可以在伪元素之后使用 text-align:justify + 来对齐第一行：

http://codepen.io/anon/pen/JeAgk

.contailner {
  line-height:0;
  text-align:justify;
  background:lightgray;
  margin:1em;
}
.contailner > * {
  display:inline-block;
  line-height:1.2em;
}
.contailner:after {
  content:'';
  display:inline-block;
  width:99%;
  vertical-align:top;/* or bottom to swallow last gaps */
}

/* some extra possibilities */
ul {padding:0;margin:0;}
.w3 {padding-left:1%;}
.w3 .box {margin:1% 1% 1% 0; border:solid;width:31%;text-align:center;box-shadow:0 0 5px;}
.w3 .w5 {width:48%;}
.w3 .w15 {width:14%;}
.w3 .w25 {width:23%;}
Run Code Online (Sandbox Code Playgroud) 
<div class="contailner">
    <div class="inlineLeft">Item 1</div>
    <div class="inlineRight">Item 2</div>
</div>
<div class="contailner">
    <span>Item 1</span>
    <span>Item 2</span>
  <span>Item 3</span>
</div>
<ul class="contailner">
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
</ul>
<div class="contailner w3">
    <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
    <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
</div>
<div class="contailner w3">
    <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
    <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box w5">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box w5">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w5">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w25">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w25">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w25">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w25">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud) 

.contailner {
  line-height:0;
  text-align:justify;
}
.contailner > div {
  display:inline-block;
  line-height:1.2em;
}
.contailner:after {
  content:'';
  display:inline-block;
  width:100%;
}
Run Code Online (Sandbox Code Playgroud)

如果您使用额外的空元素而不是伪元素，那么您就拥有了一种可用的技术，因为 text-align:justify 存在，这意味着与任何浏览器兼容。

编辑2020

对于简单的内联元素，现在text-align-last适用于所有浏览器。，可以删除伪元素。

.contailner {
  line-height:0;
  text-align:justify;
}
.contailner > div {
  display:inline-block;
  line-height:1.2em;
}
.contailner:after {
  content:'';
  display:inline-block;
  width:100%;
}
Run Code Online (Sandbox Code Playgroud) 
.contailner {
  text-align: justify;
  text-align-last: justify;
  background: lightgray;
  margin: 1em;
}

.contailner>* {
  display: inline-block;
}


/* some extra possibilities */

ul {
  padding: 0;
  margin: 0;
}

.w3 {
  padding-left: 1%;
}

.w3 .box {
  margin: 1% 1% 1% 0;
  border: solid;
  width: 31%;
  text-align: center;
  box-shadow: 0 0 5px;
}

.w3 .w5 {
  width: 48%;
}

.w3 .w15 {
  width: 14%;
}

.w3 .w25 {
  width: 23%;
}
Run Code Online (Sandbox Code Playgroud)

还有，如今

  • 如果要构建网格布局，可以轻松完成这项工作并使用flex它。space-between

  • text-align/text-align-last只能用于其原始目的：文本对齐， 而不是其他目的的解决方法。

那么您会选择什么作为导航？

<div class="contailner">
  <div class="inlineLeft">Item 1</div>
  <div class="inlineRight">Item 2</div>
</div>
<div class="contailner">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>
<ul class="contailner">
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
</ul>
<div class="contailner w3">
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
</div>
<div class="contailner w3">
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w5">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w5">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w5">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w25">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w25">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w25">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w25">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud) 
.txt {
  text-align-last: justify
}
/* or ? */
.flx {
  display: flex;
  justify-content: space-between;
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

33028 次

最近记录：

6 年，7 月 前
相关归档
如何使用CSS/HTML(不带js)隐藏图像损坏的图标 169
CSS3转换不起作用 104
-webkit-margin在文本上添加了不必要的边距 72
Webpack"OTS解析错误"加载字体 57
谷歌浏览器>文本框>活动时黄色边框..？ 43
文本对齐是对齐但是向右吗？ 28
使html内容牢不可破(在一行中) 18
CSS图像在图像加载前进行布局 18
使用CSS在锚点内垂直对齐图像 18
用于CSS绘制箭头的CSS投影 16
难疑归档
避免!= null语句 3904
"git add -A"和"git add"之间的区别. 2788
命令折叠代码的所有部分？ 1576
如何在Git中完全替换另一个分支中的master分支？ 1549
Markdown中的评论 1277
在Android Studio中重命名包 1252
将JS对象转换为JSON字符串 1199
在现代Python中声明自定义异常的正确方法？ 1176
错误消息"未找到与约束合同名称匹配的导出" 1057
jQuery的jquery-1.10.2.min.map触发了404(未找到) 1051