ol在ul中，並使某些列表項擴展到父元素的寬度

我對css很感興趣，試圖創建一個呈現書籍列表的佈局。因此，我想在兩列布局的左側顯示封面圖像（在小提琴中用固定寬度div表示）。在封面的右側，我想介紹這本書的相關信息：標題和一個有屬性值項目的有序列表。ol在ul中，並使某些列表項擴展到父元素的寬度

這些項目應該填充寬度的其餘部分。該屬性及其相應的值應該放在同一行上。

其中一個屬性值項還包含一個按鈕，該按鈕僅在此處以跨度表示。該按鈕應該放在屬性後面的同一行。

我遇到了一些問題，這是我無法理清至今：

屬性列表格式不正確。我想這是因爲我一直無法配置包含列表項目擴展到全寬。最後一個屬性值項目應顯示在同一行上。
標題加下劃線，我希望看到下劃線延伸到身體的整個寬度。目前它被截斷，我無法想出一個辦法來實現這一點。

我創建了一個小提琴，這應該顯示的問題：http://jsfiddle.net/7Xeb7/3/

這是我的基本的HTML結構：

<body> 
    <ul class="book"> 
     <li> 
      <div class="cover"></div> 
     </li> 
     <li class="bookdetail"> 
      <div class="title">Title</div> 
      <ol class="attributes"> 
       <li> 
        <span class="property">property <span>btn</span></span> 
        <span class="value">value</span> 
       </li> 
       <li> 
        <span class="property">property</span> 
        <span class="value">value</span> 
       </li> 
      </ol> 
     </li> 
    </ul> 
</body>

來源

2013-03-05 Steve Hummingbird

你的第二個問題是什麼？標題是加下劃線的，我是..你想擴展右整除的寬度嗎？ – Sachin 2013-03-05 21:53:48

是的，確切地說。我希望將該行擴展到文本之外......直到到達正文的右端 – 2013-03-05 21:57:52

「.book」和「.cover」的寬度是否保持不變？ – ASGM 2013-03-05 22:59:40

簡答

你的HTML稍微超過必要的複雜，並就事情是不是真的列表非正統使用列表中的元素。簡化它會使頁面更容易造型。我已經在這個jsFiddle中這樣做了，我認爲你的問題已經通過絕對定位.cover並添加適當的填充到.bookdetails：http://jsfiddle.net/7Xeb7/10/。（編輯：新的jsfiddle反映意見）

長的答案

儘可能，您使用的HTML標籤應該是語義相關他們所代表的內容。因此，請使用ul或ol作爲列表，使用img作爲圖片，並使用標題標籤（h1,h2等）作爲標題。這裏沒有必要使用table（這是因爲它們違反了這個語義邏輯，所以通常對佈局不滿）。在這裏，我保存你的結構和CSS類，但使用更合乎邏輯的標籤：

<div class="book"> 
     <img class="cover" src="" alt="Book Title Here" /> 
     <div class="bookdetail"> 
      <h2 class="title">Title</h2> 
      <ol class="attributes"> 
       <li> 
        <span class="property">property</span> <!-- this span wasn't closed before! --> 
        <span class="button">btn</span></span> 
        <span class="value">value</span> 
       </li> 
       <li> 
        <span class="property">property</span> 
        <span class="value">value</span> 
       </li> 
      </ol> 
     </div><!-- /.bookdetail --> 
    </div><!-- /.book -->

一旦HTML已被清理，你可以更容易地進行必要的CSS變化。你的主要問題是.bookdetail在正確的地方。目前很難，因爲您試圖平衡一個固定寬度元素（.cover）和一個可變寬度元素（.bookdetail），您希望佔用整個容器 - 固定寬度元素除外。

通過絕對定位.cover可以很容易地解決這個問題，所以它不再對.book中其他元素的位置有任何影響。然後，您可以將.bookdetail的填充設置爲0 0 0 140px - 這是自動相對於具有指定位置的最近父元素，我已製作了.book。所以.bookdetail擴展到像你想要的那樣填充book，但是正確的填充（或邊距，如果您願意的話）意味着它不與封面圖像重疊。

我也做了一些其他的CSS更改，在jsFiddle中可見，使.title更好地顯示，並適應我的HTML更改，但它們與解決您的主要問題並不直接相關，所以我將離開他們在那裏。

來源

2013-03-05 22:48:07 ASGM

這看起來不錯，但爲什麼所有的值都移到了右側？是否可以指定餘裕：41％;並讓他們向父元素的右邊移動了41％？ – 2013-03-05 23:14:59

我明白這一點。但是，您的解決方案指定了餘量：41％;但看起來更像是90％。邊距是否與左側元素的大小相關？ – 2013-03-05 23:19:28

我看到了這個問題 - 原因是'.property'也有'width：40％'，它推出'value'元素。我會在我的代碼中修復它。 – ASGM 2013-03-05 23:21:49

你缺少width屬性的尺寸，但如果不知道是你想要看到它的方式：

http://jsfiddle.net/Riskbreaker/7Xeb7/4/

我添加寬度：100％你bookdetail類

.bookdetail { 
    vertical-align:top; 
    display: inline-block; 
    width: 100%; 
}

來源

2013-03-05 21:58:27 Riskbreaker

不幸的不是。我希望封面圖片右側的書的細節。在你的例子中，細節在封面下方。其次，值標籤應放置在父元素寬度的40％處。在您的示例中，這些值非常靠右。不過謝謝。 – 2013-03-05 22:02:34

我已經改變了相應的使用div和tables

<div class="leftColumn"> 

    </div> 

    <div class="rightColumn"> 
     <div class="header"> 
      Title 
     </div> 

     <div class="content"> 
      <table width="100%"> 
       <tr><td>Property1<td><td>Value</td> 
       <tr><td>Property2<td><td>Value</td> 
       <tr><td>Property3<td><td>Value</td> 
      <div> 
</div>

和css佈局

.leftColumn 
{ 
    float:left; 
    width:30%; 
    height:250px; 
    background-color:red; 
} 
.rightColumn 
{ 
    float:right; 
    width:70%; 
    height:250px; 
    background-color:green; 
} 
.header 
{ 
    font-size:25px; 
    padding:15px; 
    height:30px; 
    verticle-align:middle; 
    border-bottom:1px solid #ccc;  
}

有look here

來源

2013-03-05 22:09:40 Sachin

謝謝。我會盡力讓它在我的項目中以這種方式工作。任何你沒有使用列表項目的原因？這種情況下的最佳做法是什麼？是否有可能不指定高度，因爲可能會有更多的屬性值項目？ – 2013-03-05 22:14:25

我當然會。我的小提琴有點麻煩，因爲我不想縮放左欄中的封面圖片。這是我能想到的：http://jsfiddle.net/GqdBs/1/對此有何建議？ – 2013-03-05 22:56:35

ol在ul中，並使某些列表項擴展到父元素的寬度

回答

相關問題