Question

我正在使用PHP从另一个页面捕获GET请求，并向用户显示所有信息（使用bootstrap）：

但我得到了这个：

我正在使用控制结构的替代语法，并且工作正常。但CSS没有应用，我不知道为什么。这是相关的代码：

        <?php

        $transactionId = $_REQUEST['transactionId'];

        if ($_REQUEST['transactionState'] == 4 ):
            $estadoTx = "Transacción aprobada";
            ?>        

            <div class="container-fluid"> 
                        <ul>
                            <li class="row">
                                <span class="itemName" id="quantity_first_product">Estado de la transaccion: </span>
                                <p class="description"><span  id="state"></span></p>
                            </li>
                            <li class="row">
                                <span class="itemName" id="quantity_first_product">ID de la transaccion: </span>
                                <p class="description"><span  id="transactionID" ></span></p>       
                            </li>                            
                        </ul>
            </div>

            <script type="text/javascript">
                var transaction_state;
                var transactionState_span = document.getElementById("state");
                transaction_state = <?php echo json_encode($estadoTx); ?>;
                transactionState_span.innerHTML = transaction_state;

                var transaction_id;
                var transactionID_span = document.getElementById("transactionID");
                transaction_id = <?php echo json_encode($transactionId); ?>;
                transactionID_span.innerHTML = transaction_id;
            </script>

         <?php else:
            $estadoTx=$_REQUEST['mensaje'];
            ?>
            <h1>Determinar que sucede</h1>
        <?php endif; ?>

两种CSS样式是：

.itemName{  
    color: #727578;
    font-size :16px;
    font-weight: bold;
    float: left;
    padding-left:25px;
    margin-right: 25px;
}

.description{   
    color: #4ea6bc;
    font-size :18px;
    font-weight: bold;
    float : left;
    padding-left: 15px;
}

当浏览器执行代码时，javascript行中的PHP代码可以正常工作：

我正在尽我所能，但没有任何作用。很抱歉很长的帖子，感谢您的帮助！

修改

CSS导入头部

<link rel="stylesheet" type="text/css" href="assets/css/custom.css"/>

抱歉重复的ID，一些ctrl-c ctrl-v问题。

Answer 1

我不知道你在做什么。我不会说西班牙语的事实也没有帮助，但我会尽我所能。

您遗漏了最重要的信息：如何导入CSS？
无论如何，首先要注意的是：不两次使用相同的ID。
<span class="itemName" id="quantity_first_product">应为<span class="itemName" id="somedifferentid">。
接下来的事情是，当我试图运行它时，CSS工作，但我得到了完全的胡言乱语。它看起来像这样：
所以我添加了一些规则让它看起来更好：
```
li.row {
    clear: both;
    list-style-type: none;
}
```
描述上的那个边缘看起来并不好看，所以我也把它删除了：
```
.description {
    [...]        
    margin:0px;
}
```
现在看起来像这样：

所以CSS清晰工作在我的最后。这是一个有效的例子：

获取数据的来源：

<form method="get" action = "newEmptyPHP.php">
    <input name = "transactionId" type="hidden" value="some-weird-id" >
    <input name = "transactionState" value="4">
    <textarea name = "mensaje"  rows="1" cols="50">Not everyone speaks spanish</textarea>
    <input type = "submit" value="Submit" >
</form>

您的php文件：

<?php
$transactionId = $_REQUEST['transactionId'];
if ($_REQUEST['transactionState'] == 4):
    $estadoTx = "Transacción aprobada"; ?>        
    <style>
        li.row {
            clear: both;
            list-style-type: none;
        }
        .itemName{  
            color: #727578;
            font-size :16px;
            font-weight: bold;
            float: left;
            padding-left:25px;
            margin-right: 25px;
        }

        .description{   
            color: #4ea6bc;
            font-size :18px;
            font-weight: bold;
            float : left;
            padding-left: 15px;

            margin: 0px;
        }
    </style>
    <div class="container-fluid"> 
        <ul>
            <li class="row">
                <span class="itemName" id="quantity_first_product">Estado de la transaccion: </span>
                <p class="description"><span class="description"  id="state">This description is in English, because I don't speak spanish.</span></p>
            </li>
            <li class="row">
                <span class="itemName">ID de la transaccion: </span>
                <p class="description"><span class="description" id="transactionID" >This description is in English, because I don't speak spanish.</span></p>        
            </li>                            
        </ul>
    </div>

    <script type="text/javascript">
        var transaction_state;
        var transactionState_span = document.getElementById("state");
        transaction_state = <?php echo json_encode($estadoTx); ?>;
        transactionState_span.innerHTML = transaction_state.toString();

        var transaction_id;
        var transactionID_span = document.getElementById("transactionID");
        transaction_id = <?php echo json_encode($transactionId); ?>;
        transactionID_span.innerHTML = transaction_id.toString();
    </script>
<?php 
    else:
        $estadoTx = $_REQUEST['mensaje']; ?>
        <h1>Determinar que sucede</h1>
        Something's missing here, compadre.
<?php endif; ?>

执行javascript代码时，CSS样式不适用

修改

1 个答案: