Question

我试图制作看起来像这样的东西：

enter image description here

到目前为止，我有：http://jsfiddle.net/ePse6/

如果不使用margin-top:-25px;这样的内容，我如何将编辑/删除链接定位在标题的右侧（表示＆＃34; iPhone＆＃34;或＆＃34; Android＆＃34;）并且在边界之间有标题和链接？

谢谢！

Answer 1

您应该创建两个填充父div的列。同时将它们设为float:left;，对于右列，您可以将文字与右侧text-align:right;对齐，或将float:right;中的两个div添加到edit和delete

这是我的小提琴：http://jsfiddle.net/ePse6/5/

无论您将哪些内容放入列中或如何格式化都取决于您。但是从这里你有两列独立的列。

如果你想将这些堆叠的多个堆叠在一起，我会将容器更改为一个类，只需在列中添加多个这些容器，以保持其整洁和可读性。喜欢这个小提琴：http://jsfiddle.net/ePse6/6/

HTML：

 <div class='container'>
     <div class='leftCollumn'>
         Iphone
     </div>
     <div class='rightCollumn'>
         <a hreft="">Edit</a><a hreft="">Delete</a>
     </div>
</div>
 <div class='container'>
     <div class='leftCollumn'>
         Iphone
     </div>
     <div class='rightCollumn'>
         <div class="button">Edit</div><div class="button">Delete</div>
     </div>
</div>

CSS：

.container
{
    width:600px;
    margin:auto;
}
.leftCollumn
{
    float:left;
    width:400px;
    background-color:#999;
}
.rightCollumn
{
    float:left;
    width:100px;
    text-align:right;
    background-color:#CCC;
}

.rightCollumn a
{
    margin-left:10px;
    margin-right:5px;
}

.button
{

    margin-left:10px;
    margin-right:5px;
    background-color:#000;
    color:#FFF;
    float:right;
}

Answer 2

为什么不使用简单且非常方便的东西？

我删除了所有乱码，为你创造了一个新的小提琴。

http://jsfiddle.net/afzaal_ahmad_zeeshan/ePse6/4/

我只使用了几行代码，我使用了div，在里面，我使用了2个段落来分隔它们。然后在里面我使用span元素来分隔右边和左边的浮动元素。

使用CSS我选择了类，然后对它们进行样式化以获得所需的输入！

以下是代码：

<div>
    <p>
       <span class="left">Android</span><span class="right">Delete Edit</span>
    </p>
    <p>
       <span class="left">iPhone</span><span class="right">Delete Edit</span>
    </p>
</div>

CSS如下：

p {
    border: 1px solid #333; // border that you wanted!
    padding: 20px; // padding all around the element
    padding-bottom: 40px; // padding at the bottom of the element
}

.left {
    float: left; // making the elements float at the left
}

.right {
    float: right; // floating elements at the right side
}

您可以转到小提琴页面，现在检查布局的设计。这是一件简单的事情。希望它是你想要的。

Answer 3

这没有列表。只需要一些CSS即可：http://jsfiddle.net/Lg96p/

CSS：

.wrap{
width:100%;
border-bottom:solid 1px #666666;
margin-bottom:20px;
padding-bottom:10px;
}

.title{
font:bold 16px arial;   
}

.fl{
float:left;
}

.fr{
float:right;
}

.lnk{
color:#6c6c6c;
display:inline-block;
text-align:right;
margin:0 10px 0 0;
text-decoration:none;
font:normal 14px arial;
}

HTML：

<div class="wrap fl">
<div class="title fl">iPhone</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>

<div class="wrap fl">
<div class="title fl">Android</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>

Answer 4

就像大多数答案一样，我来text-align:right和float:left。

我为您的实际结构将代码缩减为最小和简单的CSS，并向您明确说明：http://jsfiddle.net/ePse6/7/

ul , a { /* basic reset we need */
    padding:0;
    margin:0;
    color:gray;
    text-decoration:none;
}
.mini > ul > li {
    display:block;/* reset from list-item */
    border-bottom:solid;
    text-align:right;
    overflow:hidden;/* wraps floatting element within */
}
.mini > ul > li> h3 {
    float:left;
    margin:0;
}
.mini > ul > li  ul,
.mini > ul > li  li {
    display:inline-block;
}

将文本左右定位到div的中心

4 个答案: