-1

如何製作這樣的引用或更正對齊和下劃線鏈接？如何定位<a>標記

<body> 
<div class="div1"> 
    <a href="http://"> 
    <div><div class="div2">very long text very long text very long text</div><span>(0/1)</span></div> 
</a> 
</div>

.div1 
{ 
    width:200px; 
} 
.div2 
{ display:inline-block; 
    width:140px; 
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
}

http://jsfiddle.net/C76F7/1/

我需要使用文本溢出：省略號參考。

來源

2014-03-27 RenneR

不要把'div'成'了'。您不應該將塊元素插入內聯元素。 – Brewal

@Brewal真的嗎？爲什麼不？ – Bill

@Brewal在HTML5中的罰款.. –

首先我建議你考慮你爲什麼要嘗試這個和是否有任何其他的方法。下面是完成它的一個相當骯髒的方式。只要a設置了寬度，內容應該適當縮放。

Demo Fiddle

HTML

<a href="http://"> 
     <div>very long text very long text very long text</div><div>(0/1)</div> 
    </a>

CSS

a { 
    display:table; 
    table-layout:fixed; 
    width:200px; 
} 
a div { 
    display:table-cell; 
} 
a div:first-child { 
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
} 
a div:last-child { 
    width:35px; 
}

更新

另一種可能是簡單地使用：

Demo Fiddle

HTML

<a href="http://"> 
     <div>(0/1)</div>very long text very long text very long text 
    </a>

CSS

a { 
    display:inline-block; 
    width:200px; 
    padding-right:35px; 
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
    position:relative; 
} 
a div { 
    position:absolute; 
    left:200px; 
}

來源

2014-03-27 17:02:55 SW4

這裏使用

.div2 
{ display:inline-block; 
    width:140px; 
    text-overflow:ellipsis; 
    overflow:hidden; 
    text-decoration:underline;//for underline 
    vertical-align:middle;//for vertical alignment 
    white-space:nowrap; 
}

來源

2014-03-27 16:58:52 user3468307

如何定位<a>標記

回答

Demo Fiddle

Demo Fiddle

相關問題